使用 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

您的代码中有一个拼写错误。name 属性是firstName 而不是firstname。

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

Answer 2

替换value为value={inputValues. firstName}