reactjs - Redux：基于可切换变量设置表单项的默认值

Question

我正在制作一个功能，允许用户回复消息，并让他们可以选择包含更正（如果他们愿意）。如果他们单击按钮，则会出现键入正确的框：

  const [reply, correct] = useState("reply");
  const dispatch = useDispatch();
  const toggle = () => {
    if (reply === "reply") {
      return correct("correction");
    }
    correct("reply");
  };

...

          <Button
            className={reply === "correction" ? "hide" : "show"}
            onClick={() => toggle()}
          >
            Add Correction
          </Button>
    
          <div className={reply === "correction" ? "show" : "hide"}>
            <Button onClick={() => toggle()}>
    Cancel Correction
    </Button>

我想在表单中添加一个检查，以便它根据用户是否按下更正按钮来传递“回复”或“更正”的值“replyType”。我试图调用 {reply} 变量作为隐藏控件中的默认值，但它没有改变 - 它总是作为“回复”传递，即使我执行 console.log({reply}) 它显示我它正在从回复和更正中来回变化：

            <Control.text
              model=".replyType"
              id="replyType"
              name="replyType"
              defaultValue={reply}
              className="hide"
            />

有没有办法做到这一点？

TL;DR 试图将变量作为 defaultValue 传递，但即使变量在控制台中发生变化，它在 defaultValue 中也没有变化。

标签： reactjsreduxredux-form