1

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

 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>

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

4

2 回答 2

2

您的代码中存在拼写错误。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>
于 2020-11-20T08:13:51.387 回答
0

替换value为value={inputValues. firstName}

于 2020-11-20T06:11:42.740 回答