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

【问题标题】：How to take out props data from a component in react-js?react-js中如何从组件中取出props数据？
【发布时间】：2021-09-21 07:26:19
【问题描述】：

我正在开发一个带有 react-select 的 react.js 应用程序，我使用它制作了一个下拉菜单，并在单击菜单中的一个项目时，我想将该项目传递给一个稍后连接到 redux 商店的函数。如何我可以从 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 组件。

在addApiGrants函数的下面一行中，我想传入选择选项数据。我该怎么做？

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

谢谢

【问题讨论】：

this.props.clientName 不能在 addApiGrants 函数中工作吗？
在Option函数中没有clientName，它的props.data.api和props.data.group.see
你能分享一下 react-select 你使用的版本吗？

标签： javascript html reactjs redux react-select

【解决方案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"}

【讨论】：