Reactjs 参考vs onChange

我最近开始学习react.js（喜欢它！），并遇到了一个处理输入值的有趣场景

在egghead教程中，他们让您使用

ref

更新输入，如下所示：

handleSubmit(){
    var newNote = this.refs.note.value;
    this.refs.note.value = '';
    this.props.addNote(newNote);
}

<input type="text"  ref="note" />
<button type="button" onClick={this.handleSubmit.bind(this)}> 
  Submit 
</button>

使用

ref

似乎更容易，但是，在我最近学习react native时，您所做的一切似乎都是第二种方法，使用

onChange

函数和

state

变量

---

所以我的问题是，向前看，使用其中一个会比使用另一个更好吗？可能有一些限制使得在本机上更好地使用

状态

。

在React中，避免使用引用操作DOM。你不应该做这样的事：

this.refs.note.value = '';

必要时可以从DOM中读取（通常是响应用户输入），但信息从应用程序传递到DOM的唯一方式是通过

render（）

方法。否则，DOM将与应用程序不同步。在React中，你的“真理之源”存在于记忆中，而不是DOM中

---

您提供的第二个示例是标准反应方式。视图（由

render（）

方法定义）最终来自

props

和

state

。更改状态会触发视图中的更改。因此，调用

this.setState（）

将强制您的组件重新渲染。

我在执行有关react的Pluralsight教程时遇到了相同的情况。我想我会分享我的经验，并添加另一个例子。教程通过输入的ref值更改了输入的值

ReactDOM.findDOMNode（…）

使用ref可以缩短代码，但也可以直接更改输入值，或者依赖于组件状态

var Form = React.createClass({
  onSubmit: function(e){
    e.preventDefault();
    var loginInput = ReactDOM.findDOMNode(this.refs.login);
    this.props.addCard(loginInput.value);
    loginInput.value = '';
  },
  render: function(){
    return (<form onSubmit={this.onSubmit}>
      <input placeholder="login" ref="login"/>
      <button>Add</button>
    </form>);
  }
});

var Form=React.createClass({
提交人：函数（e）{
e、 预防默认值（）；
var loginInput=ReactDOM.findDOMNode（this.refs.login）；
this.props.addCard（loginInput.value）；
loginInput.value=''；
},
render:function（）{
返回(
添加
);
}
});

我修改了代码以通过state访问和修改输入值

var Form = React.createClass({
  getInitialState: function(){
    return {inputLogin: ''}
  },
  onKeyUpHandler: function(e){
    this.setState({inputLogin: e.target.value})
  },
  onSubmit: function(e){
    e.preventDefault();
    this.props.addCard(this.state.inputLogin);
    this.setState({inputLogin: ''})
  },
  render: function(){
    return (<form onSubmit={this.onSubmit}>
      <input placeholder="login" onKeyUp={this.onKeyUpHandler}/>
      <button>Add</button>
    </form>);
  }
});

var Form=React.createClass({
getInitialState:函数（）{
返回{inputLogin:''}
},
onKeyUpHandler:函数（e）{
this.setState（{inputLogin:e.target.value}）
},
提交人：函数（e）{
e、 预防默认值（）；
this.props.addCard（this.state.inputLogin）；
this.setState（{inputLogin:''}）
},
render:function（）{
返回(
添加
);
}
});

---

它有点冗长，但现在它的使用状态正确了。

此外，我将研究如何使用更“流畅”的方式处理数据。将数据保留在存储中，并在存储更新时更新组件。

var Form = React.createClass({
  getInitialState: function(){
    return {inputLogin: ''}
  },
  onKeyUpHandler: function(e){
    this.setState({inputLogin: e.target.value})
  },
  onSubmit: function(e){
    e.preventDefault();
    this.props.addCard(this.state.inputLogin);
    this.setState({inputLogin: ''})
  },
  render: function(){
    return (<form onSubmit={this.onSubmit}>
      <input placeholder="login" onKeyUp={this.onKeyUpHandler}/>
      <button>Add</button>
    </form>);
  }
});