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

发布于09月15日

我想在每次选中复选框(True)时更新文本输入字段.请问有没有人能告诉我这是怎么做的？

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

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

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"

推荐答案

如果希望在checkboxCheckedTrue值更新时将一个值附加到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]);

...