React开发中如何获取input组件的name属性值作为方法入参使用

实现方案 #

• input的name属性可以直接从事件对象的target字段获取，你绑定的onChange回调里直接取e.target.name就是你给Input组件设置的name属性值。要把输入内容作为参数传给搜索方法，按照React的标准实现步骤如下：

1. 先在组件构造函数中初始化state，用来存储输入框的值：

constructor(props) {
  super(props);
  this.state = {
    BarcodeNumber: ''
  }
}

2. 实现onChangeInput方法，同时获取name属性和输入值，这种写法支持多输入框复用，不用单独给每个输入框写回调：

onChangeInput = (e) => {
  // 此处即可拿到输入框的name属性值
  const inputName = e.target.name;
  const inputValue = e.target.value;
  this.setState({
    [inputName]: inputValue
  })
}

3. 调整按钮点击事件，直接从state取对应值传入搜索方法即可，调整后的完整代码如下：

<div>
  <FormGroup style={{ width: "400px" }}>
    <h3>Enter Barcode</h3>
    <InputGroup className="mb-4">
      <InputGroupAddon addonType="prepend">
        <InputGroupText>
          Barcode:
        </InputGroupText>
      </InputGroupAddon>
      <Input type="text" name="BarcodeNumber" onChange={(e) => { this.onChangeInput(e) }} />
    </InputGroup>
  </FormGroup>
  <Button onClick={() =>this.onProductSearch(this.state.BarcodeNumber)} color="primary" type="button">
    <span className="btn-inner--text">Confirm</span>
  </Button>
</div>

注意：你原代码里Input的name属性拼写为BarcodeNUmber，请保证state的key要和name属性值完全一致，否则会出现取值错误。

内容的提问来源于stack exchange，提问作者Musa