如果数据存在于 JSON 数据中,则输入 onchange 检查器 [英] Input onchange checker if data exist in JSON data

查看:22
本文介绍了如果数据存在于 JSON 数据中,则输入 onchange 检查器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在添加表单时有一个用户要求,它应该检查表单的名称是否已经存在.我怎么能在es6中做到这一点?我正在使用 AntDesign 和 ReactJS.

这是我的代码

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

const handleChange = e =>{const { name, value } = e.target;setState(() => ({...状态,[名称]:值,}));让 isExist = [...formDataSource];让 foundExistItem = isExist.filter(项目 =>item.formName === formName);};

解决方案

如果你想动态查询表单域,你应该用

I have a user requirement when adding a form it should check if the name of the form is already exist. How can I do that in es6? I'm using AntDesign and ReactJS.

Here's my code

<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
    );
 };

解决方案

If you want dynamically query the form fields, you should wrap your form with Form.create.

It injects useful functionalities like 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);

Note: You should keep your Form.Items uncontrolled using getFieldDecorator therefore avoiding onChange while collecting form data.

If you still insist to make form items controlled, you should use 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
  }
};

这篇关于如果数据存在于 JSON 数据中,则输入 onchange 检查器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆