Question

我在Reactjs中有一个表格，希望该表格可以收集信息并发送到我的API。该信息包括电话号码，性别，出生日期和出生国家。我已经编写了我的react handleChange代码，如下所示：

handleChange (event) {
    const { name, value } = event.target;
    const { info } = this.state;
    this.setState({
        info: {
            ...info,
            [name]: value
        }
    });
}

然后我编写了如下的return函数

return (
          <CardBody>
            <form name="form" onSubmit={this.handleSubmit}>
              <div className="grey-text">
               <PhoneInput
                  placeholder="Enter phone number"
                  value={ info.phone_number }
                  onChange={this.handleChange}
                  error={ info.phone_number ? (isValidPhoneNumber(info.phone_number) ? undefined : 'Invalid phone number') : 'Phone number required' }/>
                <Select
                    value={info.gender}
                    onChange={this.handleChange}
                    options={sex}
                  />

                <DatePicker
                    selected={info.dbirth}
                    onChange={this.handleChange}
                      peekNextMonth
                      showMonthDropdown
                      showYearDropdown
                      dropdownMode="select"
                  />

                <CountryDropdown
                      value={info.nationality}
                      onChange={this.onChangeh} />

              </div>
              <div style={{backgroundColor:"#006400"}}>
                <Button type="submit" onClick={this.handleSubmit} className=" btn-success btn-block"  >Validate Account</Button>
              </div>
            </form>
          </CardBody>
);

} };

当我尝试编译项目时，它可以很好地编译，但是当我尝试选择任何下拉列表（例如电话号码，性别）时，我会收到错误消息 TypeError：事件未定义或TypeError：_event $ target未定义

我对reactjs很陌生。我试图寻找答案无济于事。任何帮助，将不胜感激

Answer 1

您会收到错误消息，因为<Select />会将值传递给onChange，而<Input />会传递event，这是解决该问题的一种方法传递类似的对象：

<Select
    value={info.gender}
    onChange={value => this.handleChange({target : {name : 'mySelect', value }}) }
    options={sex}
 />

（与datePicker可能相同）

Answer 2

您可以简单地在state中定义任何变量。我定义了selectedOption并使用了此代码。这应该有帮助

handleSelect = (selectedOption) => {
    this.setState({
        selectedOption
    })
}

并致电onChange={this.handleSelect}

无法在React JS中的handlechange中接收数据

2 个答案: