javascript - 从 Flux 组件函数中，如何访问输入的值？

Question

来自试图学习 Flux 菜鸟的简单问题...

假设我想在我的应用程序组件中定义一个简单的函数来执行此操作:

on buttonA.click, send the value of textboxB

我该如何做到这一点，我可以简单地引用 testSend 函数中渲染方法的输入吗？

我查看了this example ，但对于我的简单需求来说，它似乎过于复杂。我是否真的必须为每个文本框创建另一个组件，以便最终通过单击按钮发送其值？

这是我的组件:

export default class App extends Component {
    testSend: function( evt ) {
        // Here I want to send the textboxB.value
        //AppActions.add({ name: '...' });

    },

  render: function() {
    return (
        <input type="text" id="textboxB" />
        <button id="buttonA" onClick={ this.testSend }>Send Text</button>
    );
  },
}

Answer 1

我猜 Mathletics 的评论是为了指出解决方案;)

我只能使用简单的 JavaScript 语法，就一次! :D

testSend: function( evt ) {
    alert(document.getElementById('textboxB').value);
    //AppActions.add({ name: '...' });

}

解决方案是正确使用 props 和 state，感谢您的讨论和帮助!

var App = React.createClass({

    getInitialState: function () {
    return { username: this.props.username };
  },

    changeStateUsername: function( e) {
        //alert(e.target.value);
        this.setState({username: e.target.value});
    },

  render: function() {
    return (
        <input type="text" id="textboxB" value={this.state.username} onChange={this.changeStateUsername} />
        <button id="buttonA" onClick={ this.setNewUsername }>Set</button>
    );
  }
});