状态变量正在获取 input[type===radio] 上的上一个值。或仅双击-解网

问：

这是我的 react 项目的代码。我正在尝试获取分配给输入类型无线电的值，但它没有按预期工作。当我使用 onchange 时检查我的代码，我的 handleSelect 中的“值”正在获取分配的输入的正确值，但分配给 selecttopup 的值是之前选择的输入

const handleSelectTopup = (e) => {
    const value = e.target.value;

    setSelectedTopup(value);
    console.log(e.target);
    console.log(selectTopup);
  };
<div className="topup-checkboxes" onChange={handleSelectTopup}>
                  <div className="topup-checkbox-item">
                    <input
                      type="radio"
                      id="topup-g1"
                      value="1"
                      name="g"
                    ></input>
                    <label for="topup-g1" className="topup-checkbox-item-label">
                      <span>From 500 to 3000 points</span>
                      <strong>
                        {" "}
                        + 15% <sub>free</sub>
                      </strong>
                      <LiaWalletSolid className="wallet-icon"></LiaWalletSolid>
                    </label>
                  </div>
                  <div className="topup-checkbox-item">
                    <input
                      type="radio"
                      id="topup-g2"
                      value="2"
                      name="g"
                    ></input>
                    <label for="topup-g2" className="topup-checkbox-item-label">
                      <span>From 300 to 499 points</span>
                      <strong>
                        {" "}
                        + 10% <sub>free</sub>
                      </strong>
                      <LiaWalletSolid className="wallet-icon"></LiaWalletSolid>
                    </label>
                  </div>
                  <div className="topup-checkbox-item">
                    <input
                      type="radio"
                      id="topup-g3"
                      value="3"
                      name="g"
                    ></input>
                    <label for="topup-g3" className="topup-checkbox-item-label">
                      <span>From 150 to 299 points</span>
                      <strong>
                        {" "}
                        + 5% <sub>free</sub>
                      </strong>
                      <LiaWalletSolid className="wallet-icon"></LiaWalletSolid>
                    </label>
                  </div>
                  <div className="topup-checkbox-item">
                    <input
                      type="radio"
                      id="topup-g4"
                      value="4"
                      name="g"
                      // checked={selectTopup === 4 ? "checked" : ""}
                    ></input>
                    <label for="topup-g4" className="topup-checkbox-item-label">
                      <span>From 50 to 149 points</span>
                      <strong>
                        {" "}
                        + 0% <sub>free</sub>
                      </strong>
                      <LiaWalletSolid className="wallet-icon"></LiaWalletSolid>
                    </label>
                  </div>
                </div>

reactjs 输入单选按钮

设置状态只会在下一次渲染时更改它。在您的情况下，如果handleSelected中的值获得正确的值，那么这应该可以正常工作。控制台中显示先前输入的原因是，您将调用控制台 .log 时的状态传递给 console.log（）。你可以在这里的 react 文档中看到这方面的解释。所以基本上，你告诉 React 将状态更改为下一次渲染，然后你记录当前状态，这就是为什么你在控制台中显示“上一个”输入的原因。setSelectedTopup(value)selectTopupvalueconsole.log(selectTopup)

让我们看看您的示例中会发生什么：

假设当前选择的输入是第一个输入，因此当前状态为 1，现在您选择了第二个输入。由于进行了更改，因此调用了 handleSelectTopup 函数。在您的函数中，您有：selecTopup

const value = e.target.value;

setSelectedTopup(value);
console.log(e.target);
console.log(selectTopup);

首先你给变量签名，然后你告诉 React 设置为（在我们的例子中是 2）用于下一次渲染。请记住，你只是告诉 React 去做，它还没有发生。然后你记录和 .由于当前状态为 1，因此您需要将 1 记录到控制台。完成此函数后，React 将再次渲染您的组件，并且状态将更改为 2。e.target.valuevaluesetSelectedTopup(value)selectTopupvaluee.targetselectTopupselectTopupselectTopup

我只是在我的回答中添加了示例来进一步澄清这一点。我不知道你想在实际代码中用这个函数做什么，但如果你需要一些新值的工作，你可以只使用变量。完成此函数后，React 将再次渲染您的组件，并且状态将更改为新值。valueselectTopup

上一个：触摸 iOS 虚拟键盘上的“完成”按钮时，输入被清除

下一个：为什么 useEffect 未按预期更新值？

状态变量正在获取 input[type===radio] 上的上一个值。或仅双击

state variable is getting the previous value on input[type===radio]. or working on double click only

评论

评论