在反應中將子組件中單擊元素的值傳遞給父組件中的按鈕

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