代码之家 › 专栏 › 技术社区 › Aden Lee

如何在React中使用filter()控制JSX组件?

components filter reactjs javascript

Aden Lee · 技术社区 · 2 年前

我目前正在使用返回JSX的子组件。

//PARENT COMPONENT

import ApprovalTableElement from './E_Approval_Element.js';


    //JSX of E_Approval_Element.js
    const [approvalElement, setApprovalElement] = useState([ApprovalTableElement]);

    //Add one more approval column
    const addApprovalSpace = () => {
        setApprovalElement([...approvalElement, ApprovalTableElement]);
    };

    return (
        <div className={styles['EApprovalWriteDiv']}>
            <div className={styles['authDiv']}>
                {approvalElement.map((element, index) => (
                     <button>DELETE ONE APPROVAL SECTION</button>
                    <ApprovalTableElement index={index} />
                ))}
            </div>
        </div>
    );
};

export default E_Approval_Write;

//CHILD COMPONENT

function ApprovalTableElement() {

    return (
        <>
            <table className={styles['approvalTable']}>
                <tbody className={styles['approval']}>
                    <tr className={styles['name']}>
                        <th>
                            <select style={{ marginLeft: 10 }}>
                                <option>ì í</option>
                                <option>ê²°ì¬ì</option>
                                <option>í©ìì</option>
                            </select>
                        </th>
                    </tr>
                    <tr className={styles['signature']}>
                        <td>
                            <div>SIGN</div>
                        </td>
                    </tr>
                    <tr className={styles['name']} onClick={memberModalTrigger}>
                        <td>
                            <Typography variant='button' display='block'>
                            </Typography>
                        </td>
                    </tr>
                </tbody>
            </table>
        </>
    );
}

export default ApprovalTableElement;

有了这段代码,我要做的就是使用

{approvalElement.map((element, index) => (
   <button>DELETE ONE APPROVAL SECTION</button>
   <ApprovalTableElement index={index} />
))}

此按钮用于删除选定的ApprovalTableElement。

现在,我有了这个用户界面。当我点击+按钮时,我一直在添加组件。但是,当我单击“删除”按钮时,该按钮所附的表应该会消失。但不是其他的。

我只知道组件的索引,所以我真的不知道如何使用filter()删除目标组件。

或者,我应该在子组件而不是父组件中添加按钮标记吗?

然而,如果我能用这段代码做些什么,请告诉我如何正确设置代码,使事情成为可能。非常感谢。

1 回复 | 直到 2 年前

Konrad 2 年前

只需选择那些id与您要删除的id不同的id即可

const removeApprovalSpace = (id) => {
  setApprovalElement(items => items.filter(item => item.id !== id));
};
//usage
<button onClick={() => removeApprovalSpace(id)}>Remove</button>

如果你没有id,你可以使用索引

const removeApprovalSpace = (index) => {
  setApprovalElement(items => items.filter((item, i) => i !== index));
};
//usage
<button onClick={() => removeApprovalSpace(index)}>Remove</button>