javascript - 如果 JSON 数据中存在数据,则输入 onchange 检查器
问题描述
添加表单时我有一个用户要求,它应该检查表单的名称是否已经存在。我怎么能在 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
);
};
解决方案
如果你想动态查询表单字段,你应该用Form.create
.
它注入了有用的功能,例如onFieldsChange
监听器:
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
}
};
推荐阅读
- python - 为什么 Python 会有这样的行为?初学者尝试编写刽子手游戏
- sql-server - 在where条件下执行选择查询
- swift - SCNPhysicsVehicle SCNPhysicsVehicleWheel Road 问题
- .htaccess - 301重定向多级目录
- c++ - Function pointer assignment cause error after creating DLL
- project-reactor - 为什么 Thread.sleep() 会触发订阅 Flux.interval()?
- javascript - 如何在浏览器中不加载页面的情况下执行 aspx 页面(页面加载时的 JavaScript 函数)
- python - BFS 在 Python 3 中的性能,两种实现,非常不同的执行时间
- paypal - 点对点支付处理的当前最佳实践/选项
- node.js - Sqlite3通过节点子进程execSync导入文件命令无效