Блог

Сейчас я работаю над динамической формой, но мне все еще нужно реализовать удаление элемента в объекте состояния, когда входные данные удаляются визуально. Создание и удаление Формы.Элемент и ввод управляются дизайном Ant, но реализация с состоянием-это та часть, с которой я борюсь. Это выписка из JSX, в которой создаются и удаляются входные данные. Функции add() и remove() исходят от Ant design, а также визуально создают и удаляют элемент формы:

 {current === 1 amp;amp;
  <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>
}
 

Это моя реализация добавления входных данных в объект состояния, но я изо всех сил пытаюсь удалить объект при визуальном удалении входных данных.
Я прямо сейчас добавил свою идею после remove() функции в JSX. Но фильтрация состояния не работает, потому что она всегда удаляет все элементы в состоянии.

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

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

Моя идея состоит в том, чтобы проверить состояние и создать новый объект, который включает в себя все объекты, кроме объекта с field.fieldKey (например: 0 или 1 …) в поле, на которое в данный момент нажата(удалена).
Я надеюсь, что моя проблема понятна, и заранее благодарю вас!

Я исправил свою проблему, сначала создав новый объект с текущим состоянием, а затем удалив пару ключ-значение удаленного поля во вновь созданном объекте (newFormData). После этого я установил newFormData в качестве текущего состояния.
Функция`удалить » возвращает только значение true/false, поэтому мы должны создать новый объект и использовать его в качестве нового объекта состояния, чтобы данные оставались неизменными.

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