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

您应该在disabled和handleChange功能中设置handlePass州。

componentWillMount()仅在呈现组件之前运行，但不会再次运行。

Answer 2

刚做了一个演示，是你需要的，请查看下面演示中的代码

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>本身的提交按钮。

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

2 个答案: