【问题标题】：How does one query a field value in ReactJS?如何在 ReactJS 中查询字段值？
【发布时间】：2015-06-13 22:29:34
【问题描述】：

我的代码目前正在直接访问 React 组件，并收到一条警告说“你可能不想这样做”。代码是：

var description = document.getElementById('description').value;
console.log(description);
new_child.setState({
    description: description
});

它试图访问的组件是：

var that = this;
return (
    <table>
        <tbody>
            {that.state.children}
        </tbody>
        <tfoot>
            <td>
                <textarea className="description"
                          placeholder=" Your next task..."
                          onChange={that.onChange} 
                          name="description"
                          id="description"></textarea><br />
                <button onClick={that.handleClick}
                        id="save-todo">Save</button>
            </td>
        </tfoot>
    </table>
    );

用“thinking in React”替换我这里的代码的惯用方法是什么？

【问题讨论】：

第一个代码块在哪里运行？是否在组件的render 方法中？
第一个代码在 handleClick() 方法中。第二个是在 render() 方法本身。我怀疑我正在做框架想做的事情。
您可以发布您的完整组件而不是 sn-ps（当然，去掉不相关的部分）？这会让我们更好地了解你在做什么以及如何做到“Reacty”（此外，这段代码不需要 that=this 重新绑定。也许完整的代码需要，但实际上，React 会确保绑定“正常工作”，以便您可以使用this)
面包屑注释：我有一个持续构建集成工具，它掩盖了我的 JSX 源代码的改进/改进效果/进一步开发。

标签： javascript reactjs idioms

【解决方案1】：

您应该使用refs 属性。所以假设你有一个看起来像 this 的渲染方法：

render: function () {
    <MyTextBox ref="myText" />
    <div>Some other element</div>
}

现在假设渲染的MyTextBox 元素有一个expode() 方法。您可以使用以下方式调用它：

this.refs.myText.explode()

本质上，refs 上有一个属性myText，因为在渲染期间，您通过编写ref="myText" 为其提供了一个引用名称你可以找到更多信息here

【讨论】：

好的，所以你使用ref 来访问DOM 节点React.findDOMNode(this.refs.myText) 而不是使用id 属性和document.getElementById(..)
另外，你在这里说的是，如果你的组件呈现另一个组件，你可以调用其他组件的 public 方法，例如来自更改处理程序函数 - 如果我错了，请纠正我 :)
... 好的，我现在明白了 :) 您所说的是使用 ref 意味着您可以在提交按钮单击处理程序中获取元素并获取 textareas 值。这意味着不需要在 textarea 元素上使用更改处理程序来跟踪其值。 Ref 在这里更有意义...

【解决方案2】：

我在这里称自己为完全的新手，但看看这段代码 https://github.com/abdullin/gtd/blob/master/web/components/TaskComposer.jsx

您应该能够绑定到 textareas 值：

<textarea id="description" 
          value={that.state.text} ...

然后您可以像这样在点击处理程序中提取值：

var description = this.state.text;

让我知道这是否有效:)

更新

刚刚查看了 React 主页 (https://facebook.github.io/react/)，第三个示例 应用程序 似乎也遵循这种模式

var TodoList = React.createClass({
  render: function() {
    var createItem = function(itemText, index) {
      return <li key={index + itemText}>{itemText}</li>;
    };
    return <ul>{this.props.items.map(createItem)}</ul>;
  }
});
var TodoApp = React.createClass({
  getInitialState: function() {
    return {items: [], text: ''};
  },
  onChange: function(e) {
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([this.state.text]);
    var nextText = '';
    this.setState({items: nextItems, text: nextText});
  },
  render: function() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.onChange} value={this.state.text} />
          <button>{'Add #' + (this.state.items.length + 1)}</button>
        </form>
      </div>
    );
  }
});

React.render(<TodoApp />, mountNode);

所以要回答你的问题，我认为 React 的处理方式是绑定到 this.state.

【讨论】：