React中如何将子组件点击元素的值传递给父组件按钮使用

问题分析 #

你当前代码存在以下几个核心问题：

• 子组件没有正确接收父组件传入的setClickedValue方法，反而自己维护了独立的内部状态，父组件的状态完全没有和子组件同步
• 父组件按钮的点击事件名拼写错误：onCick应为onClick
• 子组件的勾选操作只更新了自身的局部状态，没有同步到父组件的状态中
• 代码中未导入useState等React内置Hook，运行会直接报错

修复方案1：状态提升（推荐，符合React单向数据流设计） #

直接将状态统一放在父组件维护，子组件通过传入的修改方法同步状态：

import { useState } from "react";
import "./styles.css";

// 子组件接收父组件传入的状态修改方法
const Child = ({ setClickedValue }) => {
  const ItemClicked = (e) => {
    // 勾选时直接更新父组件的状态
    setClickedValue("Yes");
  };

  return (
    <div className="App">
      <h1>Checkbox Value </h1>
      <span onClick={ItemClicked}>
        <input type="checkbox" /> 点击我
      </span>
    </div>
  );
};

export default function Parent() {
  const [clickedvalue, setClickedValue] = useState("");
  return (
    <div className="App">
      <h1>
        点击下方按钮时，子组件内复选框的值会打印到控制台
      </h1>
      {/* 修正点击事件拼写错误 */}
      <button
        onClick={() => {
          console.log(clickedvalue);
        }}
      >
        查看复选框值
      </button>
      <Child setClickedValue={setClickedValue} />
    </div>
  );
}

修复方案2：子组件保留内部状态（使用useImperativeHandle + forwardRef） #

如果需要状态保留在子组件内部，可以通过ref暴露子组件的状态给父组件调用：

import { useState, useRef, useImperativeHandle, forwardRef } from "react";
import "./styles.css";

// 用forwardRef包裹子组件接收ref
const Child = forwardRef((props, ref) => {
  const [clickedvalue, setClickedValue] = useState("");

  const ItemClicked = (e) => {
    setClickedValue("Yes");
    console.log(clickedvalue);
  };

  // 暴露给父组件的方法/状态
  useImperativeHandle(ref, () => ({
    getClickedValue: () => clickedvalue
  }));

  return (
    <div className="App">
      <h1>Checkbox Value </h1>
      <span onClick={ItemClicked}>
        <input type="checkbox" /> 点击我
      </span>
    </div>
  );
});

export default function Parent() {
  const childRef = useRef(null);
  return (
    <div className="App">
      <h1>
        点击下方按钮时，子组件内复选框的值会打印到控制台
      </h1>
      <button
        onClick={() => {
          // 调用子组件暴露的方法获取状态
          console.log(childRef.current?.getClickedValue());
        }}
      >
        查看复选框值
      </button>
      <Child ref={childRef} />
    </div>
  );
}

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