如何從 react-js 中的組件中取出道具數據？

Question

我正在使用 react-select 開發 react.js 應用程序，我使用它創建了一個下拉菜單，然后單擊菜單中的一個項目，我想將該項目傳遞給一個稍后連接到 redux 商店的函數。我如何訪問來自反應選擇中使用的組件的數據？

這是我的代碼，可以為您提供更多參考。

const Option = (props) => {
  return (
    <components.Option {...props} >
      <div>{props.data.api}</div>
      <div style={{ fontSize: 12 }}>{props.data.group}</div>
    </components.Option>
  );
};

上面的代碼是我的Option組件，它在下面用於呈現Select Menu 。

return (
      <StyledForm id="form_container">
        <Grid>
          <Grid.Row>
            <Grid.Column width={3}>
              <input
                label="Client Name"
                value={this.props.clientName}
                onChange={this.setClientName}
              />
               <Select options={this.props.clientGrantList} components={{ Option }} onChange={()=>this.addApiGrants(//how to pass data)} />
            </Grid.Column>

這是我的 UI 組件，其中顯示了選擇菜單。

在addApiGrants函數的下面一行中，我想傳入選擇選項數據。我該怎么做？

<Select options={this.props.clientGrantList} components={{ Option }} onChange={()=>this.addApiGrants(//how to pass data)} />

謝謝

Answer 1

onChange處理函數接收所選對象作為參數。 因此，處理此問題的代碼將是：

const options = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" }
];

export default function App() {
  return (
    <div className="App">
      <Select options={options} onChange={item => addApiGrants(item)} />
    </div>
  );
}

這是來自onChange處理程序的所選item樣子

{value: "strawberry", label: "Strawberry"}