在反应中将子组件中单击元素的值传递给父组件中的按钮

Question

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

我在下面有什么

// 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 应该在父组件中，然后它应该传递到子组件<Child clickedValue={clickedValue}/> 。 由于 onClick function 在这种情况下位于子组件中，因此您还应该传递 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组件的 state：

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