React.js-检测没有引用就调用函数的元素

Question

假设我们有一个输入字段：

<input type="text" ref="inputBrand" onChange={this.updateState} />

调用updateState函数时，是否有一种方法可以在不引用ref情况下知道从哪个元素调用的？

updateState: function() {
  console.log(inputValue???);
},

我之所以不参考ref而这样做，是因为我将有多个输入字段。

如果上述方法不可行-是否可以在函数调用中直接传递ref ？

像这样：

<input type="text" ref="inputBrand" onChange={this.updateState(--this ref--)} />

Answer 1

您可以从SyntheticEvent参数获取输入名称和输入值，该参数将传递给React中的所有事件处理程序。

updateState: function(e){
      this.setState({[e.target.name] : e.target.value}, () => console.log(this.state))
},
render: function() {
    return <div>
        <input type="text"  name="a" onChange={this.updateState} />
        <input type="text" name="b" onChange={this.updateState} />
     </div>;
}

的jsfiddle

Answer 2

updateState: function(e) {
    console.log(e.target.value);
},

如果您触发事件参数e.target它将指向DOM元素。

Answer 3

使用事件处理程序并为每个组件（而不是ref）分配一个id ，并通过以下方式访问它： e.target.id

var MyComponent = React.createClass({
  updateState: function(e){
      console.log(e.target.id);
  },
  render: function() {
    return <div>
        <input type="text"  id="first_input" onChange={this.updateState} />
        <input type="text" id="second_input" onChange={this.updateState} />
     </div>;
  }
});

ReactDOM.render(
  <MyComponent name="World" />,
  document.getElementById('container')
);

的jsfiddle