Состояние ввода не связывает onChange при первом нажатии - PullRequest
Новая
       33

Состояние ввода не связывает onChange при первом нажатии

0 голосов
/ 16 мая 2019

Я объявил состояние с именем 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>

        );
      }
    }

1 Ответ

1 голос
/ 16 мая 2019

Как подсказывает @ Jayce444, setState не обновляет state. Так что setPlan должно выглядеть как 

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

Но вы можете использовать this.state.account_type в любом месте в функции render(). И рендеринг произойдет после того, как this.state.account_type обновится при первом клике.

...