将子组件中单击的元素的值传递到父组件中的按钮中

Question

我有两个组件，一个父组件和一个子组件。此子组件位于父组件内。在子组件内部，有一个标签，当它被点击时，一个值被存储在一个单独的状态中，现在当一个父组件内的按钮被点击时，应该打印存储在子组件状态中的值到控制台。

下面有什么

// import Checboxtest from "./Checkboxtest";
import "./styles.css";

const Child = ({ showresult, click }) => {
  const [clickedvalue, setClickedValue] = useState("");

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

  return (
    <div className="App">
      <h1>Checkbox Value </h1>

      <span onClick={ItemClicked}>
        <input type="checkbox" /> clik me
      </span>
    </div>
  );
};

export default function Parent() {
  const [clickedvalue, setClickedValue] = useState("");
  return (
    <div className="App">
      <h1>
        When clicked on the button below, the value of the checkbox inside the
        child component should be display on the console.
      </h1>
      <button
        onCick={() => {
          console.log(clickedvalue);
        }}
      >
        See checkbox value
      </button>
      <Child clickedvalue={clickedvalue} setClickedValue={setClickedValue} />
    </div>
  );
}

Answer 1

这被称为提升状态。 clickedValue useState 应该在 Parent 组件中，然后它应该传递给 Child 组件 <Child clickedValue={clickedValue}/>。 在这种情况下，由于 onClick 函数位于子组件中，您还应该传递 setter 方法 <Child clickedValue={clickedValue} setclickedvalue={setclickedvalue}/>.

编辑 #1 - 查看代码后，我看到了多个小问题 就像在 onClick 被拼写为 onCiked 一样

这是修改后的工作代码

const Child = ({clickedvalue, showresult, setClickedValue }) => {
  
  const ItemClicked = (e) => {
    setClickedValue(e.target.checked);
  };

  return (
    <div className="App">
      <h1>Checkbox Value </h1>

      <span onClick={ItemClicked}>
        <input type="checkbox" value={clickedvalue}/> clik me
      </span>
    </div>
  );
};


const Parent = () => {
  const [clickedvalue, setClickedValue] = useState(false);

  return (
    <div className="App">
      <h1>
        When clicked on the button below, the value of the checkbox inside the
        child component should be display on the console.
      </h1>
      <button onClick={()=>{console.log(clickedvalue)}}>See checkbox value</button>
      <Child clickedvalue={clickedvalue} setClickedValue = {setClickedValue}/>
    </div>
  );
}```

Answer 2

您应该按如下方式提升Child 组件的状态：

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

  return (
    <div className="App">
      <h1>Checkbox Value </h1>

      <span onClick={ItemClicked}>
        <input type="checkbox" /> clik me
      </span>
    </div>
  );
};

export default function Parent() {
  const [clickedvalue, setclickedvalue] = useState("");

  return (
    <div className="App">
      <h1>
        When clicked on the button below, the value of the checkbox inside the
        child component should be display on the console.
      </h1>
      <button onCick={()=>{console.log(clickedvalue)}}>See checkbox value</button>
      <Child  setClickedValue = {setClickedValue}/>
    </div>
  );
}