refs vs onChange

Question

我最近开始学习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>

后来,我正在玩材料ui库(也很棒)并遇到了一个问题,我无法使用a 更新其中一个材料组件(可能是因为这个问题)ref.经过一段时间在谷歌上我发现你可以使用一个state,并使用一个onChange函数更新它,如下所示:

handleNoteChange(e){
    this.setState({newNote: e.target.value});
}

<TextField 
    type="text" 
    value={this.state.newNote} 
    onChange={this.handleNoteChange.bind(this)} />

似乎使用a ref会更容易,但是,在我最近的学习反应原生时,你所做的一切似乎是第二种方式,使用onChange函数和state变量.

所以我的问题是,继续前进,使用一个比另一个更好吗？也许有限制使得state在本地使用更好？

Answer 1

在React中,避免使用引用操作DOM.你永远不应该做这样的事情:

this.refs.note.value = '';

在必要时(通常是响应用户输入)从DOM中读取是很好的,但是信息应该从应用程序传递到DOM的唯一方法是通过您的render()方法.否则,DOM将与您的应用程序不同步.在React中,你的"真理之源"存在于记忆中,而不是存在于DOM中.

您提供的第二个示例是标准的React方式.视图 - 由render()方法定义- 最终来自props和state.更改状态会触发视图中的更改.因此调用this.setState()将强制您的组件重新渲染.