将选定的值传递回父组件React Hook

import React, { useState } from "react";
import ChildComponent from "./ChildComponent";

function ParentComponent() {
  const [selectedValue, setSelectedValue] = useState("");

  const handleSelectedValue = (value) => {
    setSelectedValue(value);
  };

  return (
    <div>
      <ChildComponent onSelectedValue={handleSelectedValue} />
      <p>选定的值：{selectedValue}</p>
    </div>
  );
}

export default ParentComponent;

import React from "react";

function ChildComponent({ onSelectedValue }) {
  const handleSelection = (event) => {
    const selectedValue = event.target.value;
    onSelectedValue(selectedValue);
  };

  return (
    <select onChange={handleSelection}>
      <option value="">请选择</option>
      <option value="option1">选项1</option>
      <option value="option2">选项2</option>
      <option value="option3">选项3</option>
    </select>
  );
}

export default ChildComponent;

import React, { useState, createContext, useContext } from "react";

const SelectedValueContext = createContext();

function ParentComponent() {
  const [selectedValue, setSelectedValue] = useState("");

  return (
    <SelectedValueContext.Provider value={selectedValue}>
      <ChildComponent setSelectedValue={setSelectedValue} />
      <p>选定的值：{selectedValue}</p>
    </SelectedValueContext.Provider>
  );
}

function ChildComponent({ setSelectedValue }) {
  const selectedValue = useContext(SelectedValueContext);

  const handleSelection = (event) => {
    const selectedValue = event.target.value;
    setSelectedValue(selectedValue);
  };

  return (
    <select onChange={handleSelection}>
      <option value="">请选择</option>
      <option value="option1">选项1</option>
      <option value="option2">选项2</option>
      <option value="option3">选项3</option>
    </select>
  );
}

export default ParentComponent;