React实现复选框勾选时追加日期字符串至输入框的方案

需求说明 #

实现复选框勾选（状态为true）时，将日期追加到文本输入框中（而非覆盖原有内容），最终得到用<br/>分隔的连续日期字符串。

原代码 #

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 );
  }
});

修改后的代码 #

import { useState, useEffect } from 'react';

function App() {
  const [isChecked, setIsChecked] = useState(false);
  const [dateText, setDateText] = useState("");

  useEffect(() => {
    if (isChecked) {
      const currentDate = new Date();
      // 基于当前状态追加内容，避免覆盖
      setDateText(prevText => {
        return prevText ? `${prevText}<br/>My Date is ${currentDate}` : `My Date is ${currentDate}`;
      });
      // 勾选后自动取消复选框，方便多次操作
      setIsChecked(false);
    }
  }, [isChecked]); // 仅当复选框状态变化时触发

  return (
    <div>
      <input
        type="checkbox"
        checked={isChecked}
        onChange={(e) => setIsChecked(e.target.checked)}
      />
      {/* 若要渲染HTML换行，使用dangerouslySetInnerHTML；若作为纯文本输入，改用input框 */}
      <div dangerouslySetInnerHTML={{ __html: dateText }} />
      {/* <input type="text" value={dateText} readOnly /> */}
    </div>
  );
}

export default App;

关键修改点 #

• 添加Effect依赖：给useEffect加上[isChecked]依赖，确保仅在复选框状态变化时执行逻辑，避免无意义的重复渲染。
• 函数式状态更新：用setDateText(prevText => ...)的形式，基于当前状态值追加内容，解决状态更新异步导致的覆盖问题。
• 分隔符处理：判断已有内容是否为空，为空时直接添加日期，否则先加<br/>再追加新日期，保证格式符合要求。
• 操作优化：勾选后自动将复选框置为false，方便用户多次勾选添加日期，无需手动取消。

输出示例 #

多次勾选后，dateText的值会变为：

"My Date is Thu Sep 15 2022 15:52:41<br/>My Date is Thu Sep 15 2022 15:52:45<br/>My Date is Thu Sep 15 2022 15:52:49"

内容的提问来源于stack exchange，提问作者curiousCat