如果JSON数据中存在数据，请输入onchange检查器

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

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

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.

这是我的代码

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

推荐答案

如果要动态查询表单字段，则应使用 Form.create .

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

它注入有用的功能，例如onFieldsChange侦听器:

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

注意:您应该使用 getFieldDecorator ，因此在收集表单数据时避免使用onChange.

如果您仍然坚持要控制表单项，则应使用 getFieldValue :

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