Ввод проверки обмена, если данные существуют в данных JSON

Question

У меня есть требование пользователя при добавлении формы, оно должно проверить, существует ли имя формы уже. Как я могу сделать это в es6? Я использую AntDesign и ReactJS.

Вот мой код

<Form.Item label="Form Name">
  {getFieldDecorator('formName', {
   rules: [formConfig],
  })(<Input name="formName" onChange={onChange} />)}
</Form.Item>

const handleChange = e => {
  const { name, value } = e.target;

   setState(() => ({
     ...state,
     [name]: value,
   }));

   let isExist = [...formDataSource];
    let foundExistItem = isExist.filter(
      item => item.formName === formName
    );
 };

Answer 1

Если вы хотите динамически запрашивать поля формы, вы должны обернуть вашу форму в Form.create.

. Она добавляет полезные функции, такие как onFieldsChange listener:

const onFieldsChange = (_, changedFiels) => {
  const { username } = changedFiels;
  if (username) {
    // Make your API checks
    console.log(`Now changing ${username.name}`);
  }
};

const ValidatedFields = Form.create({ onFieldsChange })(App);

Примечание: Вы должны держать свои Form.Item неуправляемыми, используя getFieldDecorator, поэтому избегайте onChange при сборе данных формы.

Если вы все еще настаиваетечтобы контролировать элементы формы, вы должны использовать getFieldValue:

const handleChange = e => {
  const { name, value } = e.target;
  const { getFieldValue } = form;

  setState(() => ({
    ...state,
    [name]: value
  }));

  // or use getFieldValue for a single query
  const values = getFieldsValue(['formName',...more fields]);

  if (values.length) {
    // API CALL
  }
};