首页 > 解决方案 > 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"}}>&nbsp;</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是输入字段的名称参数,

我不知道我在这里做错了什么,请帮我存档,提前谢谢。

标签: javascriptreactjs

解决方案


推荐阅读