javascript - React Typeahead and Validation ,TypeError: event.persist is not a function
问题描述
我是 React 新手,目前我正在使用 ReactTypeahead
系统,
这是我输入的头部代码:
const Createcontact = props => {
const {inputs, handleChange, handleSubmit ,errors} = UseForm({name:'',account:''},validate);
const [selected, setSelected] = useState([]);
return (
<>
<Row>
<Col lg="12">
<FormGroup>
<label
className="form-control-label"
htmlFor="input-username"
>
Contact Name
</label>
<InputGroup className="input-group-alternative mb-3">
<Input
className="form-control-alternative"
// defaultValue="lucky.jesse"
id="input-name"
placeholder="Contact Name"
type="text"
onChange={handleChange}
name="name"
/>
<span style={{background: "red",fontSize:"xx-small"}}> </span>
</InputGroup>
<span style={{color: "red",fontSize:"small"}}>{errors.name}</span>
</FormGroup>
</Col>
</Row>
<FormGroup>
<label
className="form-control-label"
htmlFor="input-email"
>
Account
</label>
<Typeahead
id="input-account"
onChange={setSelected}
options={lookuplist}
placeholder="Choose a Account..."
selected={selected}
filterBy={['name']}
labelKey={lookuplist => `${lookuplist.name} (${lookuplist.id})`}
name="account"
/>
</FormGroup>
</>
)};
export default Createcontact;
在上面的代码中,我使用 onChange={handleChange}
来验证不同组件“customhooks.js”中的名称,
我也想为“typeahead”实现相同的功能,但是如果我在 typeahed 上使用 onChange={handleChange} 会抛出一个错误“TypeError: event.persist is not a function”
这是我的句柄功能代码:
const useForm = (initialValues,validate) => {
const [inputs,setInputs] = useState(initialValues);
const [errors,setErrors] = useState({});
const handleChange = (event) => {
event.persist();
setInputs(inputs => ({...inputs, [event.target.name]: event.target.value}));
}
}
我要归档的是json格式{"name":"Robert","account":7},这里的name,account是输入字段的名称参数,
我不知道我在这里做错了什么,请帮我存档,提前谢谢。
解决方案
推荐阅读
- python - 我想从本地分支运行我的 Django 项目。有没有办法做到这一点?
- java - 主启动器 =true 在 Xamarin android 中不起作用(system.typeloadexception)
- python - Flask 无法从 html 表单中选择数据
- azure - 从 Azure SQL 导出数据后如何添加主键和外键约束
- javascript - Javascript - 如何创建过滤的嵌套数组
- javascript - 创建反应应用程序构建在服务器中不起作用:错误:缩小反应错误#130;
- javascript - Webpack 在运行时导入模块而不知道在构建期间是哪个
- c++ - 将有效的类对象指针绑定到 boost::function<>fn。如果在对象被销毁后调用 `fn` 会发生什么?
- azure-devops - 限制发布管道中的“完成”部署部署
- r - 根据 R 中的有序列对列进行排序