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

【问题标题】：Updated state not useful in the return statement of a method更新状态在方法的返回语句中没有用
【发布时间】：2020-01-25 02:40:16
【问题描述】：

我的渲染函数中有一个按钮，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>
  );
}

【问题讨论】：

onChange 值应该是一个函数
你也缺少onChange值中的右花括号
是的，我在代码中有这个，只是在添加时错过了它。现已更新
如何创建弹出窗口？使用传送门？
这是一个自定义组件，使用 --- const Modal = createFactory(ReactBootstrap.Modal);

标签： javascript reactjs

【解决方案1】：

像这样试试。

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>

【讨论】：

我知道这会起作用，但我之间有很多逻辑，我无法将所有这些都添加到主返回内联中。我刚刚发布了一个虚拟代码示例。

【解决方案2】：

您忘记将其绑定到事件处理程序，当它更新状态时，它不会更新您的本地状态：

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

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

注意按钮的 onclick，我绑定了它，它允许更新您的本地状态。

【讨论】：

试过了，还是不行。实际上在实际代码中，我在按钮的 onClick 和 createUser() 之间还有另一种方法。然后从该方法调用转到 createUser()
尝试在两者之间绑定方法。对我来说，通常是绑定导致问题。
试过了，但现在得到了：react.development.js?820d:88 Uncaught Invariant Violation: React.Children.only 预计会收到一个 React 元素子元素。

【解决方案3】：

你能试试我的方法吗？

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

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

如果 this.state.name 根据输入的变化在主渲染函数中得到更新，这个值将作为参数传递给 createUser。

【讨论】：