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

Question

来自 Flux 新手尝试学习的简单问题...

假设我想在我的 App 组件中定义一个执行此操作的简单函数：

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