反应js,得到兄弟姐妹或父母的价值

Question

我有新的反应,我很好奇如何正确地做到这一点.假设我有这个表单,点击按钮,我想得到文本框值,

var form = React.createClass({
   submit : function(e){
      //how to get textbox value?
   },
   render : function(){
   return (
      <form>
         <input type="text" id="textbox" value="hey, get me"/>
         <button onClick={this.submit}>Get it</button>
      </form>
      );
   }
});

任何答案将不胜感激!谢谢!

Answer 1

React强制执行父对子单向数据流.因此,没有简单的方法可以从兄弟姐妹访问数据.

但是,如果一个孩子改变整个组件的状态,你可能想要一个状态来跟踪它.

示例代码:

var FormBox = React.createClass({
  getInitialState: function () {
    return {
      textBox: 'hey, get me!'
    }
  },
  pressButton: function () {
    alert(this.state.textBox)
  },
  textChange: function (e) {
    this.setState({
      textBox: e.target.value
    })
  },
  render: function () {
    return (
      <form action='.'>
        <input type='text' placeholder={this.state.textBox} onChange={this.textChange}/>
        <button onClick={this.pressButton}> Get it </button>
      </form>
    )
  }
})

ReactDOM.render(<FormBox />, document.getElementById('root'))

JSBin演示:https://jsbin.com/koxujuwope/edit ？ js,output

另外,只是一个建议......你应该转到ES2015

Answer 2

实现此目的的一种方法是使用引用。

构建组件之后，您可能会发现自己想“伸出手”并在render（）返回的组件实例上调用方法。链接到参考文档

引用基本上是您要访问的html元素/ react实例。在这种情况下，我们要获取Input html元素。我们通过this.inputValue获取输入元素。然后按照通常的js规则读取其值。

 var form = React.createClass({
       submit : function(e){
          e.preventDefault();
          console.log(this.inputValue.value);
       },
       render : function(){
       return (
          <form onSubmit={this.submit}>
             <input type="text" id="textbox" defaultValue="hey, get me"
               ref={ function(node){ this.inputValue = node }.bind(this) }
             />
             <button onClick={this.submit}>Get it</button>
          </form>
          );
       }
    });

这是您的示例的jsfiddle，您可以检查控制台的输入值。

完成同一件事的另一种方法是使输入成为受控元素。这意味着您将输入的value属性分配给this.state.inputValue，并将onChange事件处理程序传递为onChange = {yourInputHandlerFunction}。

请参阅答案，它解释了完成同一件事的这种方式。