javascript - 如何在 React 中状态更改时禁用按钮

Question

我正在尝试根据几个状态来禁用 react 按钮。下面是我的代码的分割

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() 函数内设置状态.

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