参考 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>

后来，我正在使用 ref 解决 material ui library (also awesome) and ran into a problem where I couldn't update one of the material components (Probably because of this 问题）。在 Google 上一段时间后，我发现您可以使用 state，只需使用 onChange 函数更新它，就像这样：

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

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

似乎使用 ref 会更容易，但是，在我最近学习 react native 的时候，你所做的一切似乎都是第二种方式，使用 onChange 函数和 state变量。

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

Answer 1

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

this.refs.note.value = '';

在必要时从 DOM 中读取是很好的（通常是为了响应用户输入），但是信息从您的应用程序传递到 DOM 的唯一方式是通过您的 render() 方法。否则，DOM 将与您的应用程序不同步。在 React 中，你的 "source of truth" 存在于内存中，而不是 DOM.

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

Answer 2

我运行在做关于 React 的 Pluralsight 教程时遇到了同样的情况。我想我会分享我的经验并添加另一个例子。本教程通过其 ref 值更改了 in input 的值。

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>);
  }
});

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

参考 vs onChange

refs vs onChange

reactjs

react-native

material-ui