Question

我现在正在处理一个动态表单，但仍然需要在输入被视觉删除时实现状态对象中项目的删除。 Form.Item 和输入的创建和删除由 Ant Design 管理，但状态的实现是我正在努力解决的部分。这是创建和删除输入的 JSX 的摘录。函数 add() 和 remove() 来自 Ant 设计，可以直观地创建和删除表单项：

{current === 1 &&
  <Form name="dynamic_form_nest_item" autoComplete="off" onFinish={onFinish}>
    <Form.List name="allergy">
      {(fields, { add, remove }) => (
        <>
          {fields.map(field => (
            <Form.Item
              {...field}
              name={[field.fieldKey]}
              fieldKey={[field.fieldKey]}
              rules={[{ required: true, message: 'Missing allergy' }]}
              style={{ marginBottom:8 }}
            >
              <Input
                placeholder="Your allergy"
                style={{ marginRight:4 }}
                name={field.fieldKey}
                onChange={e => onChangeInput(e)}
              />
              <MinusCircleOutlined onClick={() => {remove(field.name); const allergy=field.fieldKey ; const newFormData = Object.values(formData).filter((formData)=>(allergy !== allergy)); setFormData( newFormData)}}/>
            </Form.Item>
          ))}
          <Form.Item>
            <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
              Add allergy
            </Button>
          </Form.Item>
        </>
      )}
    </Form.List>
  </Form>
}

这是我将输入添加到状态对象的实现，但是在视觉上删除输入时，我正在努力删除对象。我现在已经在 JSX 中的 remove() 函数之后添加了我的想法。但是过滤状态不起作用，因为它总是删除状态中的每一项。

const [formData, setFormData] = useState({});

const onChangeInput = e => {
  setFormData({ ...formData, [e.target.name]: e.target.value })
};

我的想法是检查状态并创建一个新对象，该对象包括除当前单击（删除）字段的带有 field.fieldKey（例如：0 或 1 ...）的对象之外的所有对象。
我希望我的问题是可以理解的，并提前感谢您！

Answer 1

我首先创建一个具有当前状态的新对象，然后删除新创建的对象 (newFormData) 中已删除字段的键值对，从而解决了我的问题。之后，我将 newFormData 设置为当前状态。
`delete` 函数只返回 true/false，因此我们必须创建一个新对象并将其用作新状态对象以保持数据不可变。

<MinusCircleOutlined onClick={() => {remove(field.name); const newFormData = formData; delete newFormData[field.fieldKey]; setFormData(newFormData)}}/>

React：从状态对象中动态添加和删除键值对

1 个答案: