如果 JSON 数据中存在数据，则输入 onchange 检查器答案

【问题标题】：Input onchange checker if data exist in JSON data如果 JSON 数据中存在数据，则输入 onchange 检查器
【发布时间】：2019-10-08 15:35:11
【问题描述】：

我在添加表单时有一个用户要求，它应该检查表单的名称是否已经存在。我怎么能在 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
    );
 };

【问题讨论】：

所有表单名称都是本地的还是存储的？
@zfrisch 将在 API 中发布
如果Form.Item 中的标签Form Name 存在或Form 中的字段formName 存在，您要检查什么？
@DennisVash 字段名称。从 api 获取列表然后检查数据是否存在显示验证。否则添加成功
你的问题不清楚，所以我会详细说明：像formName 这样的字段是否添加了动态，这就是为什么你要检查它是否存在或你想检查formName里面的Input是否不为空？

标签： javascript reactjs antd

【解决方案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);

注意：您应该使用 getFieldDecorator 保持您的 Form.Items 不受控制，因此在收集表单数据时避免使用 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
  }
};

【讨论】：