React组件双向数据共享求助：父子组件isToggled状态同步

你的核心需求是让父组件的isToggled状态同时控制父组件按钮文本和子组件的切换功能，现有代码存在几个关键问题，下面是修正方案：

问题分析 #

1. 子组件props接收错误：React组件的props是一个对象，你直接把isToggled作为参数接收，无法正确获取父组件传递的状态和修改函数。
2. 子组件冗余状态：子组件不需要自己维护data状态，应该直接使用父组件传递的状态和更新方法。
3. 事件绑定错误：onChange={(e) => onChanged}没有触发函数调用，导致状态无法更新。
4. Input未绑定checked属性：子组件的checkbox没有和父组件状态关联，UI无法同步状态变化。
5. 状态初始化缺失：useState<boolean>()未设置默认值，会导致初始状态为undefined，引发逻辑错误。

修正后的代码 #

子组件 CondisAddressSearchToggle #

export function CondisAddressSearchToggle({ isToggled, onToggle }: { isToggled: boolean; onToggle: () => void }): JSX.Element {
  return (
    <div className="btnArea">
      <label className="desc" id="toggleBtnLabel" htmlFor="toggleBtn">Suche in:</label>
      <input
        className="toggle"
        id='toggleBtn'
        name='toggleBtn'
        type='checkbox'
        checked={isToggled}
        onChange={() => onToggle()}
      />
    </div>
  )
}

父组件 CondisAddressSearchComponent #

export function CondisAddressSearchComponent({ name }: ICondisAddressSearchProps): JSX.Element {
  // 初始化状态为false，避免undefined
  const [isToggled, setIsToggled] = React.useState<boolean>(false); 

  // 定义切换状态的函数，传递给子组件
  const handleToggle = () => {
    setIsToggled(prev => !prev);
  };

  return (
    <form>
      <header>
        <h2>{name}</h2>
      </header>
      <div>
        {/* 传递当前状态和切换函数给子组件 */}
        <CondisAddressSearchToggle isToggled={isToggled} onToggle={handleToggle} />
      </div>
      <div>
        <div>
          <button
            id="searchBtn"
            name="searchBtn"
            tabIndex={6}
            type="submit"
            value="Submit">
            In {isToggled ? 'OLAV' : 'CONDIS'} suchen 
          </button>
        </div>
      </div>
    </form>
  )
};

关键修改说明 #

• props传递方式：父组件分别传递isToggled状态和handleToggle函数，子组件通过对象解构接收，类型定义更清晰。
• 移除子组件冗余状态：子组件直接使用父组件的状态控制checkbox的checked属性，确保UI和状态同步。
• 修复事件绑定：onChange直接调用onToggle函数，触发父组件的状态更新。
• 状态初始化：给useState设置默认值false，避免初始状态为undefined导致的逻辑异常。

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