如何在 react-select 中将 props 传递给自定义组件答案

【问题标题】：How to pass props to custom components in react-select如何在 react-select 中将 props 传递给自定义组件
【发布时间】：2018-09-28 08:59:42
【问题描述】：

我正在尝试使用自定义组件作为 react-select 中的输入字段。因为我需要验证，所以我尝试使用 HTML5 oninvalid（JSX 中的 onInvalid）作为我的输入标签，并为 oninvalid 设置自定义消息。但是，我无法将消息作为道具传递给我在选择中设置的组件。下面是我的代码。

Input.js

import React from "react";
import { components } from "react-select";

export default class Input extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    console.log("component mounted");
  }
  setInvalidMessage = event => {
    event.target.setCustomValidity("Custom Message");
  };

  render() {
    if (this.props.isHidden) {
      return <components.Input {...this.props} />;
    }
    return (
      <components.Input
        {...this.props}
        required
        onInvalid={this.setInvalidMessage}
      />
    );
  }
}

example.js

import React from "react";
import Input from "./Input";
import Select from "react-select";
import { colourOptions } from "./docs/data";

const InputBoxWithText = props => {
  return <Input {...props} />;
};

export default () => (
  <form>
    <Select
      closeMenuOnSelect={true}
      components={{ InputBoxWithText }}
      options={colourOptions}
    />
    <input type="submit" />
  </form>
);

如果我在组件属性中传递 Input，我会在 Input.js 中获得硬编码消息。如果我通过 InputBoxWithText，我根本看不到 Input 安装。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Example from './example';

ReactDOM.render(
<Example />,
document.getElementById('root')
);

这里是CodeSandBox.io URL。

如果我做错了什么，谁能告诉我。

【问题讨论】：

标签： javascript reactjs react-select

【解决方案1】：

最好通过select传递自定义props：

props.selectProps

为避免每次 Select 更新时重新创建自定义组件，可能会导致意外错误。

【讨论】：

【解决方案2】：

不确定您是否已经找到解决方案，但我设法使用箭头函数传递了我的自定义道具

<Select
  closeMenuOnSelect={true}
  options={colourOptions}
  components={{
    Input: (inputProps: InputProps) => (
      <components.Input {...inputProps} />
    ),
  }}    
/>

【讨论】：

【解决方案3】：

在我的情况下，我以这种方式传递错误：

        <Select
            defaultValue={values}
            selectProps={{ errors }}
            isMulti
            options={inventoryList}
            onChange={changeTreeElement}
            // @ts-ignore
            styles={colourStyles}
        />

然后像selectProps.selectProps.errors in colourStyles methods 一样访问它。

【讨论】：

【解决方案4】：

我没有解决方案（我也在寻找同样的东西），但你的例子有多个错误。

要加载输入，您必须编写 components={{ Input: InputBoxWithText }}，因为 Input 的组件名称不是 InputBoxWithText。

此外，onInvalid 似乎不是Input API 的一部分，因此它永远不会触发。您是否尝试使用<input oninvalid="" />..？

【讨论】：

您可能还不知道答案，但您已经解决了我的问题。我忽略了组件将对象作为输入的事实。我将组件更改为您回答的内容，并且它按预期工作。 HTML 的 oninvalid 在 JSX 中是 onInvalid。我假设 react-select 会将我传递的所有道具附加到最终输入标签。因此，当使用自定义 Input 标签呈现 react-select 时，它将在 input 标签上设置 oninvalid。
您找到原始问题的解决方案了吗？
@sebap 我添加了一个带有示例的答案，这可能是您正在寻找的内容