React中状态更改时如何禁用按钮[重复]

Question

我正在尝试禁用基于几个状态的反应按钮。下面是我的代码的细分

constructor(props) {
    super(props);
    this.state = {
        email: '',
        pass: '',
        disabled: true
    }

    this.handleChange = this.handleChange.bind(this);
    this.handlePass = this.handlePass.bind(this);
}

非常自我解释的构造函数。禁用将随着状态的变化而改变。我的渲染方法看起来像这样

render() {

    if(this.state.email && this.state.pass) {
        this.setState({ disabled: false })
    }

    return (
        <div className='container'>
            <div className='top'></div>
            <div className='card'>
                <MuiThemeProvider>
                    <Card >
                        <div className='wrapper'>
                            <TextField
                                hintText="Email"
                                value={this.state.email} onChange={this.handleChange}
                            /><br/>
                            <TextField
                                hintText="Password"
                                type="password"
                            /><br/>
                            <div className='login-btn'>
                                <RaisedButton label="Login" primary={true}
                                              disabled={this.state.disabled} />
                            </div>
                        </div>
                    </Card>
                </MuiThemeProvider>
            </div>
        </div>
    )
}

如您所见，我有 2 个文本字段，我正在使用以下方法处理数据更改

handleChange(e) {
    this.setState({email: e.target.value});
}

handlePass(e) {
    this.setState({pass: e.target.value});
}

现在我的按钮最初是禁用的，每次更改状态并重新渲染组件时，我都想检查状态更改并相应地启用按钮。所以我在考虑像这样使用生命周期方法

componentWillMount() {
        if(this.state.pass && this.state.disabled) {
            this.setState({disabled: false})
        }
    }

但是，这不起作用。当电子邮件和密码字段不为空时，按钮保持禁用状态。我不确定我做错了什么。

Answer 1

请不要在render() 函数中设置状态。这可能会导致发生无限循环。

参考：https://github.com/facebook/react/issues/5591

您可以在handleChange() 和handlePass() 函数中设置禁用状态，而不是在render() 函数中设置状态。

如果需要更多详细信息，请提及。

Answer 2

您应该在handleChange 和handlePass 函数中设置disabled 状态。

componentWillMount() 仅在组件渲染之前运行，但不再运行。

Answer 3

刚刚做了一个demo，是你需要的吗，查看下面demo中的代码

demo

更改以下代码：

 class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
        email: '',
        pass: '',
        invalidData: true
    }
    this.onEmailChange = this.onEmailChange.bind(this);
    this.onPasswordChange = this.onPasswordChange.bind(this);
}

  // componentWillUpdate is to be deprecated
  //componentWillUpdate(nextProps, nextState) {
  //  nextState.invalidData = !(nextState.email && nextState.pass);
  //}  


  onEmailChange(event) {
    this.setState({ email: event.target.value });
  }

  onPasswordChange(event) {
    this.setState({ pass: event.target.value });
  }

  render() {
    return (
      <form>
        <input value={this.state.email} onChange={this.onEmailChange} placeholder="Email" />
        <input value={this.state.password} onChange={this.onPasswordChange} placeholder="Password" />
        // from this <button disabled={this.state.invalidData}>Submit</button>
    //to
     <button disabled={!(this.state.email && this.state.password)}>Submit</button>
      </form>
    );
  }
}

**更新**

禁用<button disabled={!(this.state.email && this.state.password)}>Submit</button> 本身的提交按钮。