reactjs 从列表中删除用户:Ant Design

tcomlyy6  于 2023-03-12  发布在  React
关注(0)|答案(2)|浏览(192)

有人能帮我删除用户列表的数据代码是可用的下面https://codesandbox.io/s/r4try请告诉我如何从用户列表中删除特定的用户。请使用用户上的删除按钮

2exbekwf

2exbekwf1#

这是解决办法
Codesandbox Demo

https://codesandbox.io/s/control-between-forms-ant-design-demo-99sus?file=/index.js

<Form.Item
     label="User List"
            shouldUpdate={(prevValues, curValues) => prevValues.users !== curValues.users}
          >
            {({ getFieldValue, setFieldsValue }) => {
              const users = getFieldValue('users') || [];
              return users.length ? (
                <ul>
                  {users.map((user, index) => (
                    <li key={index} className="user">
                      <Avatar icon={<UserOutlined />} />
                      {user.name} - {user.age}
                      <CloseOutlined onClick={() =>{
                        const updatedUsers = delete users[index];
                        setFieldsValue({users: updatedUsers})
                      }} style={{ paddingLeft: 15 }}/>
                    </li>
                  ))}
                </ul>
              ) : (
                <Typography.Text className="ant-form-text" type="secondary">
                  ( <SmileOutlined /> No user yet. )
                </Typography.Text>
              );
            }}
          </Form.Item>
vh0rcniy

vh0rcniy2#

经过我更新的代码,这个版本应该是可行的,上面的代码是行不通的。

<Form.Item
        label="User List"
        shouldUpdate={(prevValues, curValues) => prevValues !== curValues}
      >
        {({ getFieldValue, setFieldsValue }) => {
          const users = getFieldValue("users") || [];
          return !!users.length ? (
            <ul>
              {users.map((user, index) => (
                <li key={index} className="user">
                  <Avatar icon={<UserOutlined />} />
                  {user?.name} - {user?.age}
                  <CloseOutlined
                    onClick={() => {
                      delete users[index];
                      const updatedUsers = users.filter((u) => !!u);
                      
                      setFieldsValue({ users: updatedUsers });
                    }}
                    style={{ paddingLeft: 15 }}
                  />
                </li>
              ))}
            </ul>
          ) : (
            <Typography.Text className="ant-form-text" type="secondary">
              ( <SmileOutlined /> No user yet. )
            </Typography.Text>
          );
        }}
      </Form.Item>

我的试用版:https://codesandbox.io/s/control-between-forms-ant-design-demo-forked-jd28v6?file=/index.js:2666-4129

相关问题