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>

后来，我正在玩material ui库（也很棒）并遇到了一个问题，我无法更新其中一个材料组件（可能是因为this问题）一个ref。在Google上停留一段时间后，我发现您可以使用state，并使用onChange函数更新它，如下所示：

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

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

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

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

Answer 1

在React中，避免使用引用来操纵DOM。你永远不应该做这样的事情：

this.refs.note.value = '';

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

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

Answer 2

我在做一个关于反应的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({
  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>);
  }
});

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

refs vs onChange

2 个答案: