reactjs 可重用removeAlert函数

mmvthczy 于 2022-11-29 发布在 React

关注(0)|答案(1)|浏览(132)

有没有可能使这个html表可以重用？我在两个地方使用了同一个表，并根据它的用途使用了不同的属性。有一件事我无法解决。表的每个示例都使用了一个带参数的onclickhandler，1个用于删除用户（user.id），另一个用于添加用户（user），因此每个onClick都使用不同的参数。
一个onClickHandler的

const onClickHandler = (user) => {
        setAddedAlert(true);
        removeAlert()
        setFavourites([...favourites, user]);
    };

在组件中使用的表的示例和传递的属性

{usersData &&
                <Table
                    data={usersData}
                    onClickHandler={onClickHandler}
                    buttonText={"Add"}
                />
            }
        </div>

表格示例

const Table = ({ data, onClickHandler, buttonText }) => (
    <Container>
        <StyledTable>
            <THead>
                <TR>
                    <TH>ID</TH>
                    <TH>NAME</TH>
                    <TH>PHONE</TH>
                </TR>
            </THead>
            <TBody>
                {data?.map((user) => (
                    <TR key={user.id} >
                        <TD>{user.id}</TD>
                        <TD>{user.name}</TD>
                        <TD>{user.phone}</TD>
                        <TD>
                            <Button
                                onClick={() => onClickHandler(user)}
                            >
                                {buttonText}
                            </Button>
                        </TD>
                    </TR>
                ))}
            </TBody>
        </StyledTable>
    </Container>
)

export default Table;

reactjs

来源：https://stackoverflow.com/questions/74576461/reusable-removealert-function

1条答案

按热度按时间

wvt8vs2t1#

单独的添加和删除功能可以完成这项工作。

function App() {
    const data = [
        { id: 1, name: "Jay", phone: "1111111111" },
        { id: 2, name: "Mike", phone: "2222222222" },
        { id: 3, name: "Bob", phone: "3333333333" },
    ];

    const [userData] = useState(data);
    const [faveUsers, setFaveUsers] = useState([]);

    const onClickHandleAdd = (user) => {
        const newFaveUsers = [...faveUsers, user];
        setFaveUsers(newFaveUsers);
    };
    const onClickHandleRemove = (user) => {
        const newFaveUsers = faveUsers.filter((u) => u.id !== user.id);
        setFaveUsers(newFaveUsers);
    };

    return (
        <>
            <Table
                data={userData}
                onClickHandler={onClickHandleAdd}
                buttonText="Add"
            />
            <Table
                data={faveUsers}
                onClickHandler={onClickHandleRemove}
                buttonText="Remove"
            />
        </>
    );
}

赞(0）回复(0）举报 2022-11-29

我来回答

reactjs 可重用removeAlert函数

1条答案

相关问题

热门标签

最新问答