reactjs 如何在react-select中将 prop 传递给自定义组件

bbuxkriu 于 2022-12-22 发布在 React

关注(0)|答案(5)|浏览(142)

我正在尝试使用一个自定义组件作为react-select中的输入字段。因为我需要验证，所以我尝试使用HTML5 oninvalid（JSX中的onInvalid）作为我的输入标记，并为oninvalid设置自定义消息。但是，我无法将消息作为 prop 传递给我在select中设置的组件。以下是我的代码。
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。
谁能告诉我我做错了什么。

reactjs

来源：https://stackoverflow.com/questions/52551786/how-to-pass-props-to-custom-components-in-react-select

5条答案

按热度按时间

vqlkdk9b1#

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

props.selectProps

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

赞(0）回复(0）举报 2022-12-22

qni6mghb2#

在我的例子中，我是这样传递错误的：

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

然后像colourStyles方法中的selectProps.selectProps.errors一样访问它。

赞(0）回复(0）举报 2022-12-22

0s7z1bwu3#

我设法通过我的自定义 prop 使用箭头函数
有关定义组件，请参见文档

const Input = (inputProps: InputProps) => (
  <components.Input {...inputProps} />
);

<Select
  closeMenuOnSelect={true}
  options={colourOptions}
  components={{Input}}    
/>

赞(0）回复(0）举报 2022-12-22

lawou6xi4#

我没有解决方案（我也在寻找同样的东西），但你的例子有多个错误。
要加载输入，必须写入components={{ Input: InputBoxWithText }}，因为Input的组件名称不是InputBoxWithText。
此外，onInvalid似乎不是Input API的一部分，所以它永远不会触发。您是否正在尝试使用<input oninvalid="" /> ..？

赞(0）回复(0）举报 2022-12-22

ecfsfe2w5#

在版本5中，将自定义 prop 与typescript一起使用的唯一方法是使用模块扩充。
所以在我的项目中，我打开react-app-env.d.ts并添加了以下内容：

import { GroupBase } from 'react-select'

declare module 'react-select/dist/declarations/src/Select' {
  export interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
    customOnClear: () => void;
  }
}

将该 prop 传递给选择对象，如下所示：

import Select from "react-select";

<Select customOnClear={() => {/* Your custom clear */} />

并在自定义组件中使用它，如下所示：

const ClearIndicator = ({ selectProps }: ClearIndicatorProps<Option, false>) => {
  const { customOnClear } = selectProps
  return <InputClear onClick={customOnClear} />
}

文件：https://react-select.com/typescript#custom-select-props

赞(0）回复(0）举报 2022-12-22

我来回答

reactjs 如何在react-select中将 prop 传递给自定义组件

5条答案

相关问题

热门标签

最新问答