Question

我正在尝试使用handleChange函数将某些数据从子组件传递到父组件，但是恢复的第一个状态始终为null，我需要防止这种情况。

//PARENT COMPONENT
class FormOpen extends React.Component  {
    constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    }

    handleChange(value){
      this.setState({
          active: value
      })
    }

    render(){
        return(
          <form>
              <CheckSelectBox change={this.handleChange} />
          </form>
        )
    }
}


//CHILD COMPONENT
class CheckSelectBox extends React.Component {
  constructor(props) {
      super(props);
      this.handleClick = this.handleClick.bind(this);
      this.state = {
        active: false,
      }
  }

  handleClick(event) {
      const currentState = this.state.active;
      this.setState({ active: !currentState, checked: !currentState });
      this.props.change(this.state.active);  
  }

  render() {
    return (
      <div onClick={this.handleClick}>
        <input type="checkbox" />
      </div>
    );
  }
}

例如，如果我在父组件中打印：

console.log(this.state.active);

更改后，我将收到第一个空状态，有人可以帮助我吗？

Answer 1

在react this.setState中异步工作，这意味着setState不会立即更新状态。

解决方案-> this.setState()收到了在状态更新后触发的回调。

在handleClick

中类似这样

this.setState({ active: !currentState, checked: !currentState }, () => {
  this.props.change(this.state.active);
);

从React的父组件的子组件恢复数据后，防止组件的第一个状态为null

1 个答案: