reactjs - 使用 React 如何在每次选中复选框时附加到字符串并显示在另一个输入文本字段中

Question

我想在每次选中复选框(true)时更新文本输入字段。有人可以告诉我该怎么做吗？

我正在尝试单击一个复选框并更新另一个输入字段。每次选中该复选框时，我都想将日期添加到字符串中。

目前，我的字符串值正在被新值覆盖。我希望它是一个字符串而不是一个数组。

const [checkboxCheckedTrue, setCheckboxStatus] = useState(false);
 const [updateMyMsg, setmyMsg] = React.useState("");

  useEffect((): void => {
    if (checkboxCheckedTrue) {
      var a = new Date();
      const myMsg = "My Date is" + a;
      
      setmyMsg(myMsg );
    }
  });

我期望的字符串应如下所示:

"Thu Sep 15 2022 15:52:41 <br/> Thu Sep 15 2022 15:52:41 <br/> Thu Sep 15 2022 15:52:41"

Answer 1

如果您想在 checkboxCheckedTrue 值更新并切换为 true 时向 updateMyMsg 状态追加一个值，请使用功能状态更新来追加到之前的状态值。

示例:

const [checkboxCheckedTrue, setCheckboxStatus] = useState<Boolean>(false);
const [myMsg, setMyMsg] = useState<string>("");

useEffect((): void => {
  if (checkboxCheckedTrue) {
    setMyMsg(myMsg => myMsg + (new Date()).toString() + "<br/>");
  }
}, [checkboxCheckedTrue]);

使用数组表示 myMsg 状态并在想要使用状态值时调用 .join 可能会更简单。

示例:

const [checkboxCheckedTrue, setCheckboxStatus] = useState<Boolean>(false);
const [myMsg, setMyMsg] = useState<string[]>([]);

useEffect((): void => {
  if (checkboxCheckedTrue) {
    setMyMsg(myMsg => myMsg.concat((new Date()).toString()));
  }
}, [checkboxCheckedTrue]);

...

myMsg.join("<br/>")