输入状态在第一次点击时不绑定 onChange

Question

我已经宣布了一个名为 account_type 的状态。我创建了一个 onChange 事件，它在单击 div 时更改状态值。

<div
          className="price-plan"
          value="star"
          onClick={() => this.setPlan("star")}
        >

问题是 account_type 状态在我第一次点击 div 时没有更新。只有当我点击它两次时它才会更新。有没有一种方法可以通过单击 div 来更新状态。这是我的代码的摘录，展示了我正在尝试做的事情


    let isRedirect = false;

    class PricePlan extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          account_type: "",
          renderRedirect: false
        };

        this.handleChange = this.handleChange.bind(this);
      }

      // Handle fields change
      handleChange = input => e => {
        this.setState({ [input]: e.target.value });
      };


      setPlan(plan) {
        this.setState({
          account_type: plan
        });
        console.log(this.state.account_type);
        // if (this.state.account_type !== undefined) {
        //   isRedirect = true;
        // }
      }

      render() {
        if (isRedirect) {
          return (
            <Redirect
              to={{
                pathname: "/sign-up",
                state: { step: 2, account_type: this.state.account_type }
              }}
            />
          );
        }

        return (
            <div
              className="price-plan"
              value="star"
              onClick={() => this.setPlan("star")}
            >
              <h3>{this.props.planName}</h3>
              <div className="mute price-row">Name</div>
              <p className="price">Price</p>
              <span className="billed-frequency">Cycle</span>
            </div>

        );
      }
    }

Answer 1

正如@Jayce444 建议的那样，setState 不要立即更新 state。所以 setPlan 应该看起来像

setPlan(plan) {
    this.setState({
         account_type: plan
    });
    console.log(plan);  // Don't expect immediate state change in event handler
  }

但是您可以在 render() 函数中的任何地方使用 this.state.account_type。渲染将在 this.state.account_type 第一次点击更新后发生。

输入状态在第一次点击时不绑定 onChange

Input state not binding onChange on first click

javascript

events

onchange

reactjs