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

Posted 2023-02-19

【中文标题】react-js中如何从组件中取出props数据？

【英文标题】：How to take out props data from a component in react-js?

【发布时间】：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 你使用的版本吗？

【参考方案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"