将状态从 react-select <Select> （以函数形式）传递给父类

Question

我正在尝试在我的应用程序中使用 react-select“选择”组件作为一种方便的方式来生成一系列下拉列表作为我的 UI 的一部分。

从 react-select 文档中，我已经能够让这些组件使用所需的选项进行渲染；但是，从 Select 组件中存储的值通过 useState 挂钩存储为状态变量。

我需要将这些菜单的值（状态）传递给父组件。我不知道如何让这些函数中生成的状态值能够在更高的父组件中读取。以下是我目前拥有的一些 sn-ps。

注意：为这些子函数填充选项道具的数组是在更高的父组件处生成的，并作为道具传递下来。部分代码似乎没有问题

function ButtonA(props){
  const options=props.buttonAOptions;
  const [selectedOption, setSelectedOption]=useState(null);
  
  return(
    
    <div>
      <p>Button A 
      <Select
      value={selectedOption}
      onChange={newValue =>setSelectedOption(newValue)}
      options={options}
      />
     
      </p>
    </div>
     
  )
}

function ButtonB(props){
  const options=props.buttonBOptions;
  const [selectedOption, setSelectedOption]=useState(null);
  
  return(
    
    <div>
      <p>Button B 
      <Select
      value={selectedOption}
      onChange={newValue =>setSelectedOption(newValue)}
      options={options}
      />
     
      </p>
    </div>
     
  )
}

 class Window extends React.Component {
         constructor(props){
           super(props);
           } 
// there are some other methods in here that are not related to this problem

      render(){
           return (
             
             <div>
             <ButtonA  
             buttonAOptions={this.props.buttonAOptions}
             
             />
             
               <ButtonB 
               buttonBOptions={this.props.buttonBOption}
               />
             
             </div>
               
               )
      }
  }

Answer 1

您可以通过回调与父组件通信。您可以解除状态并传递回调以更改父级的状态，这也作为道具传递给您的组件，或者您可以在父级和子级上保持相同的状态，只需将子级的更改传达给父级。

例子：

function Parent() {
  const [counters, setCounters] = useState({ a: 0, b: 0 });

  return (
    <>
      A: {counters.a}
      <Child onChange={(value) => setCounters((s) => ({ ...s, a: value }))} />

      B: {counters.b}
      <Child onChange={(value) => setCounters((s) => ({ ...s, b: value }))} />
    </>
  )
}

function Child({ onChange }) {
  const [counter, setCounter] = useState(0);

  function handleClick() {
    setCounter((s) => {
      const newValue = s + 1;

      onChange && onChange(newValue);

      return newValue;
    })
  }

  return <button onClick={handleClick}>Add 1</button>;
}