时间戳

首页 > 解决方案 > 更新状态在方法的返回语句中没有用

javascript - 更新状态在方法的返回语句中没有用

问题描述

我的渲染函数中有一个按钮，onClick 调用了一个方法，该方法显示一个带有输入文本框和按钮的简单表单的弹出窗口。问题是如果输入文本框为空，我希望禁用此按钮。

我尝试在状态中设置一个变量“名称”并使用它。甚至认为当用户在输入文本框中进行一些更改时状态值正在更新，但我无法使用这个更新的值来启用或禁用按钮。

render(){
  return(
    <button type='button' onClick={this.createUser} />
  );
}

private createUser = (e) => {
  return (
    <div>
      <input onChange={event => this.setState({name : event.target.value})}></input>
      <button disabled={!this.state.name}>Create</button>
    </div>
  );
}

标签： javascriptreactjs

解决方案

试试这样。

class Application extends React.Component {
  state = {
    name: '',
    show: false,
  };
  handlePopup = (show) => {
    this.setState({show});
  }
  handleChangeText = (e) => {
    this.setState({name: e.target.value});
  }
  renderPopup = (value, isVisible) => {
    if(isVisible)
      return (
        <div>
            <input value={value} onChange={this.handleChangeText} />
            <button disabled={!value} onClick={(e) => this.handlePopup(false)} >Create</button>
        </div>
      );
  }
  
  render(){
    const { show, name } = this.state;
    return(
      <div>
        <button type='button' onClick={(e) => this.handlePopup(true)}>Click here</button>
        {this.renderPopup(name, show)}
        <div>{name}</div>
      </div>
    );
  }
}
React.render(<Application />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<div id="app"></div>

推荐阅读