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

您可以获取输入名称＆amp;来自SyntheticEvent param的输入值，该值传递给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

使用事件处理程序并为每个组件分配id而不是ref，并通过函数

从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

React.js - 检测在没有ref的情况下调用函数的元素

3 个答案: