如何在反应选择中将道具传递给自定义组件

Question

I am trying to use a custom component as an input field in react-select. Since I need validation I am trying to use HTML5 oninvalid ( onInvalid in JSX) for my input tag and set the custom message for oninvalid . However I am unable to pass the message as a prop to the component that I am setting in select. Below is my code.

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>
);

If I pass Input in components attribute I get the hard coded message in Input.js. If I pass InputBoxWithText I don't see Input mounting at all.

index.js

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

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

Here is CodeSandBox.io URL .

Can any one let me know if what am I doing wrong.

Answer 1

Not sure if you already found a solution but I managed to pass my custom props using an arrow function

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

Answer 2

It's better to pass custom props via select:

props.selectProps

To avoid re-creating of Custom component each time Select updates, what may cause unexpected bugs.

Answer 3

In my case I was passing errors in such way:

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

Then access it like selectProps.selectProps.errors in colourStyles methods .

Answer 4

I don't have the solution (i'm looking for the same thing as well), but you example has multiple errors.

To load the input you have to write components={{ Input: InputBoxWithText }} , since the component name for Input is not InputBoxWithText .

Also the onInvalid does not seem to be part of the Input API, so it will never trigger. Are you trying to use the <input oninvalid="" /> ..?

Answer 5

In version 5 the only way to use custom props with typescript is to use module augmentation.

So in my project I opened react-app-env.d.ts and added there this:

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

You pass the prop to the select like this:

import Select from "react-select";

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

And use it in your custom component like this:

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

Docs: https://react-select.com/typescript#custom-select-props