如何使用React Hooks实现勾选复选框时同步两个textarea内容

核心问题说明 #

你的代码存在3个关键逻辑错误：

• handleChange里的三元运算符仅执行了相等比较操作，没有把结果赋值给状态，比较逻辑完全没有实际作用
• React的setChecked是异步更新接口，调用setChecked(!checked)后立刻读取checked拿到的还是更新前的旧值，判断逻辑会出错
• 没有处理勾选同步后，修改常住地址pa时自动同步到通讯地址ca的逻辑，同步功能无法持续生效

修正后完整代码 #

import React, { useState, useEffect } from 'react' 

const SyncAddress = () => {
  const [pa, setPa] = useState('');
  const changePa = e => {
    setPa(e.target.value);
  }

  const [ca, setCa] = useState('');
  const changeCa = e => {
    setCa(e.target.value);
  }

  const [checked, setChecked] = useState(false);

  // 监听勾选状态和常住地址变化，自动同步通讯地址
  useEffect(() => {
    if (checked) {
      setCa(pa);
    }
  }, [pa, checked])

  const handleChange = () => {
    const newChecked = !checked;
    setChecked(newChecked);
    // 切换为勾选时立刻同步当前的常住地址到通讯地址
    if (newChecked) {
      setCa(pa);
    }
  }

  return (
    <div id="sync-address" className="mx-auto container">
      <h2>请输入两个地址</h2>
      <input 
        type="checkbox"
        checked={checked}
        onChange={handleChange}
      />
      <span>同步地址</span> 
      <br />
      <p>常住地址：</p>
      <textarea 
        rows={5}
        cols={50}
        value={pa}
        onChange={changePa}
      />
      <br />
      <p>通讯地址：</p>
      <textarea 
        rows={5}
        cols={50}
        value={ca}
        onChange={changeCa}
        disabled={checked} // 同步状态下禁止修改通讯地址，避免逻辑冲突
      />
    </div>
  )
}

export default SyncAddress

优化说明 #

• 新增useEffect钩子监听pa和checked的状态，只要处于同步状态，修改常住地址时会自动同步到通讯地址
• 切换复选框时先拿到最新的勾选状态再执行同步逻辑，避免异步更新导致的状态读取错误
• 同步状态下禁用通讯地址输入框，避免用户输入和自动同步逻辑冲突
• 所有状态操作都使用显式的赋值逻辑，消除原有的ESLint比较警告

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