reactjs - 使用 React 每次勾選複選框時如何將字串附加起來並顯示在另一個輸入文字欄位

我想在每次勾選（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"

答案＃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/>")

答案＃2

請試試這個，希望有幫助 :)

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

  useEffect((): void => {
    if (checkboxCheckedTrue) {
      var a = new Date().toDateString();
      const myMsg = `${updateMyMsg}${a}`;
      
      setmyMsg(myMsg );
    }
  },[checkboxCheckedTrue]);