使用 React.js 单击按钮后如何更改几个元素的状态答案

【问题标题】：how change state of several elements after click on button with React.js使用 React.js 单击按钮后如何更改几个元素的状态
【发布时间】：2015-06-13 02:56:44
【问题描述】：

我在 React.js 上使用 material-ui 我的 main.jsx 中有几个 material-ui 组件

文本字段

getInitialState: function() {
    return {
      errorTextName: '',
      errorTextAge: '',
      errorTextCity: '',
      errorTextState: ''
    };
  }

<TextField
    id="name"
    errorText={this.state.errorTextName}
    onChange={this._handleErrorInputChange}
/>

_handleErrorInputChange: function(e) {
    if (e.target.id === 'name') {
      this.setState({
        errorTextName: e.target.value ? '' : 'Please, type your Name'
      });
    } 
  }

当我输入一些文本并删除它时效果很好，但我需要火（显示）

错误文本

仅当我在所有空文本字段上单击按钮时：

<FlatButton
onTouchTap={this._handleClick}
label="I'm done lets go!"
/>

_handleClick: function(e) {
    this.refs.snackbar.show();
    //console.log(TextField.refs);
  }

那么，如何从我的 FlatButton 组件调用 TextField 组件方法？

【问题讨论】：

标签： reactjs material-design

【解决方案1】：

如果您正在处理一个小型项目，您可以将 TextField 的状态移动到作为 TextField 和 FlatButton 的父级的组件。子组件可以通过回调与父组件通信。

<Parent>
  <TextField onChange={this.change} />
  <FlatButton onClick={this.click} />
</Parent>

如果您不想传递回调，另一种选择是设置组件可以侦听的全局事件系统。我建议只在小项目中这样做。在大型项目中，当多个组件触发和接收事件时，调试变得非常困难。

对于较大的项目，您很可能希望使用 Flux 实现或某种全局应用程序状态系统。

【讨论】：

是的，我有同样的模式，正如你提到的<Parent> <TextField onChange={this.change} /> <FlatButton onClick={this.click} /> </Parent> 只有几个TextField 的<Parent> <TextField onChange={this.change} /> <TextField onChange={this.change} /> <TextField onChange={this.change} /> <FlatButton onClick={this.click} /> </Parent>，我知道我可以创建回调。问题我如何在 Parent 中获取所有 TextField，检查它们都不是空的并在单击 FlatButton 后调用 onChange={this.change}？
如果您难以将所有组件置于一个父级之下，您应该使用全局事件系统、通量或全局应用程序状态。