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

Question

我在React.js上使用material-ui 我的main.jsx

中有几个material-ui组件

  

的TextField

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

当我输入一些文字并将其删除时它完美无缺，但我需要火（显示）

  

ERRORTEXT

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

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

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

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

Answer 1

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

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

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

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