Question

我正在使用React中的模式并让它在我的应用程序的其他地方成功运行。但是，在以下代码段中，this.state.display永远不会设置为false。我可以控制它的日志，看到该函数正在触发，但this.state.display在整个生命周期初始化后设置为true。

class AdvancedToDoModal extends Component {
  constructor(props) {
    super();
    this.state = {
      display: false,
      modalContent: this.fetchModalContent(props)
    }

    this.fetchModalContent = this.fetchModalContent.bind(this);

    this.numberInput = this.numberInput.bind(this);
    this.dateInput = this.dateInput.bind(this);
    this.showModal = this.showModal.bind(this);
    this.hideModal = this.hideModal.bind(this);
  }

  numberInput() {
    return (
      <div>Number Input</div>
    )
  }

  dateInput() {
    return (
      <div>Date Input</div>
    )
  }

  showModal() {
    this.setState({ display: true })
  }

  hideModal() {
    console.log('hide')
    this.setState({ display: false }, () => {
      console.log('display is always true: ', this.state)
    });
  }

  fetchModalContent(props) {
    var modalContent;

    if (props.inputType === 'number') {
      modalContent = this.numberInput();
    } else if (props.inputType === 'date') {
      modalContent = this.dateInput();
    } else {
      modalContent = null;
      console.log('Unknown inputType');
    }

    return modalContent;
  }

  render() {
    return (
      <div onClick={this.showModal} className={this.state.display} style={{height: '100%', width: '100%'}}>
        <Modal display={this.state.display} title={this.props.title} onClose={this.hideModal} >
          {this.state.modalContent}
        </Modal>
      </div>
    )
  }
}

任何指针都将不胜感激！

Answer 1

您的代码的问题是您在父元素上有一个onClick处理程序，它在您单击关闭按钮时设置状态。看看你的渲染功能

render() {
    return (
      <div onClick={this.showModal} className={this.state.display} style={{height: '100%', width: '100%'}}>
        <Modal display={this.state.display} title={this.props.title} onClose={this.hideModal} >
          {this.state.modalContent}
        </Modal>
      </div>
    )
  }

在root div中，你有onClick处理程序调用showModal，它将display状态设置为true。现在，在模态中，您单击任何调用hideModal的关闭按钮，但在此之后，您的父div onClick也会被调用，这会让您再次声明为true。因此，您的display州始终保持原状。删除此onClick处理程序，它将被修复。

setState不会更改布尔参数的值

1 个答案: