使用 React hooks 处理输入时遇到问题

Question

我尝试用钩子处理用户的文本输入。

 const [inputValues, setInputValues] = useState({
firstName:"",
lastName:"",
email:"",
telNum:"",
contactType:"Tel.",
message:"",
agree:false

});

我尝试通过

更新值

  const handleChange = event => {
setInputValues({ ...inputValues, [event.target.name]: event.target.value,});
}

和事件：

onChange={handleChange}

示例输入字段代码：

    <FormGroup row>
          <Label htmlFor='firstname' md={2}>
            First Name
          </Label>
          <Col md={10}>
            <Input
              type='text'
              id='firstname'
              name='firstname'
              placeholder='First Name'
              value={firstName}
              valid={errors.firstName === ""}
              invalid={errors.firstName !== ""}
              onBlur={handleBlur("firstName")}
              onChange={handleChange}             />
            <FormFeedback>{errors.firstName}</FormFeedback>
          </Col>
        </FormGroup>

但是每当我在输入字段中输入内容时。我找不到我在输入字段中输入的值。我不明白这里发生了什么。请帮助我摆脱困境

Answer 1

将value替换为value={inputValues. firstName}

Answer 2

您的代码中存在拼写错误。名字属性是名字而不是名字。

<FormGroup row>
          <Label htmlFor='firstname' md={2}>
            First Name
          </Label>
          <Col md={10}>
            <Input
              type='text'
              id='firstname'
              name='firstName'
              placeholder='First Name'
              value={inputValues.firstName}
              valid={errors.firstName === ""}
              invalid={errors.firstName !== ""}
              onBlur={handleBlur("firstName")}
              onChange={handleChange}             />
            <FormFeedback>{errors.firstName}</FormFeedback>
          </Col>
        </FormGroup>

使用 React hooks 处理输入时遇到问题

Facing a problem while Handle an input with React hooks

javascript

reactjs

react-hooks

react-forms