Question

我有一个按钮。如果单击它，文本将更改（由于setState（{}））。我想（仅当）单击按钮并且文本更改为弹出模态组件。模态弹出的功能再次改变状态。更改后，模式也应该在1-3秒后弹出。我尝试使用超时（功能...），但这没有用。调用2个函数仅适用于文本更改，但不适用于模式弹出。任何帮助都会很棒！

    class App extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                display: false,
                modal: false
            }
            this.onClick = this.onClick.bind(this);
        }
        change() {
            this.setState({
                display: !this.state.display
            })
        };
        toggle() {
            if (this.state.modal == true) {
                this.setState({
                    modal: !this.state.modal
                })
            }
        };

        onClick() {
            this.change()
            this.toggle()

        }
        render() {
            if (this.state.display) {
                return <a onClick={() => { change(); toggle();}}><p>Hello</p> </a>
                    <Modal onClick={this.onClick} status={this.state.modal}/>

            } else {
                return <a onClick={this.onClick}> <p>Bye</p></a>
            }
        }
    }

洞察我的模态组件：

....
    return(
  <div className="modal" data-status={this.props.status}>
....

Answer 1

如果组件内部必须存在所有这些逻辑，则检查状态更改的一个位置是componentDidUpdate()生命周期功能。如果我理解你的意图正确，代码可能会如下所示：

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            display: false,
            modal: false
        }

        this.toggleDisplay = function(){
          this.setState({
            display: !this.state.display
          });
        }.bind( this );

        this.showModal = function(){
          this.setState( { modal: true } );
        }.bind( this );

        this.hideModal = function(){
          this.setState( { modal: false } );
        }.bind( this );
    }

    componentDidUpdate( prevProps, prevState ){
      // if toggled to display
      if( !prevState.display && this.state.display ){
        if( !this.state.modal ){
          setTimeout( this.showModal, 3000 ); //delay 3 seconds
        }
      }

      // if toggled to not display
      else if( prevState.display && !this.state.display ){
        if( this.state.modal ){
          this.hideModal(); //assuming you don't want to delay hide
        }
      }
    }

    render() {
      const msg = this.state.display ? 'Hello' : 'Bye',
          modal = this.state.modal ? (
            <Modal onClick={this.toggleDisplay} status={this.state.modal}/>
          ) : null;

      return (
        <div>
          <a onClick={this.toggleDisplay}}><p>{msg}</p></a>
          {modal}
        </div>
      );
    }
}

正如我所知，如果在执行计时器之前发生状态变化，则容易出错，但我会将这个问题作为练习留给你。

React - 如何调节状态函数的执行（在状态改变时）？

1 个答案: