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

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

构建组件后，您可能会发现自己想要“触及” out“并调用从render（）返回的组件实例上的方法。link to refs docs

Refs基本上是您要访问的html元素/反应实例。在这种情况下，我们想要获取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示例，您可以在控制台中查看输入值。

实现同样目标的另一种方法是使输入成为受控元素。这意味着您将input的value属性赋值给this.state.inputValue，并将onChange事件处理程序作为onChange = {yourInputHandlerFunction}传递。

查看解释这种完成同样事情的方法的答案。

Answer 3

以下代码可帮助我设置两个兄弟之间的通信。设置在render（）和componentDidMount（）调用期间在其父级中完成。它基于https://reactjs.org/docs/refs-and-the-dom.html

class App extends React.Component<IAppProps, IAppState> {
    private _navigationPanel: NavigationPanel;
    private _mapPanel: MapPanel;

    constructor() {
        super();
        this.state = {};
    }

    // `componentDidMount()` is called by ReactJS after `render()`
    componentDidMount() {
        // Pass _mapPanel to _navigationPanel
        // It will allow _navigationPanel to call _mapPanel directly
        this._navigationPanel.setMapPanel(this._mapPanel);
    }

    render() {
        return (
            <div id="appDiv" style={divStyle}>
                // `ref=` helps to get reference to a child during rendering
                <NavigationPanel ref={(child) => { this._navigationPanel = child; }} />
                <MapPanel ref={(child) => { this._mapPanel = child; }} />
            </div>
        );
    }
}

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

3 个答案: