9

我最近开始学习 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库（也很棒），遇到了一个问题，我无法使用ref. 在 Google 上一段时间后，我发现您可以使用 a state，然后使用onChange函数对其进行更新，如下所示：

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

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

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

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

4

2 回答 2

13

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

this.refs.note.value = '';

必要时从 DOM 中读取是可以的（通常是为了响应用户输入），但信息从应用程序传递到 DOM 的唯一方式是通过您的render()方法。否则，DOM 会与您的应用程序不同步。在 React 中，你的“事实来源”存在于内存中，而不是 DOM 中。

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

于 2015-12-13T02:16:31.787 回答
0

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

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

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

于 2016-01-31T13:47:53.677 回答