如何从 react-js 中的组件中取出 props 数据？

Question

我正在开发一个带有 react-select 的 react.js 应用程序，我使用它制作了一个下拉菜单并单击菜单中的一个项目，我想将该项目传递给一个函数后来连接到 redux store.How 我可以从 react-select 中使用的组件访问数据吗？

这是我的代码，可以给你更多的参考。

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 组件，其中显示 select 菜单。

在 addApiGrants 函数的下面一行中，我想传入 select 选项 data.How 我可以这样做吗？

<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"}

如何从 react-js 中的组件中取出 props 数据？

How to take out props data from a component in react-js?

html

javascript

reactjs

react-select

redux