javascript - React-select: custom Control does not render select components - Stack Overflow

admin管理员组

文章数量:1414861

Working with react-select@next and following the example here for custom Control ponents does not give the expected result.

import TextField from "@material-ui/core/TextField";
import Select from "react-select";

const InputComponent = (props) => {
    return (
        <TextField {...props} />
    );
};

export const MaterialSelect = (props) => {
    const { suggestions, ...other } = props;
    return (
            <Select
                options={suggestions}
                ponents={{
                    Control: InputComponent,
                }}
                {...other}
            />
    );
};

const suggestions = [
    {
        label: "Test One",
        value: "testOne",
    },
    {
        label: "Test Two",
        value: "testTwo",
    },
];

<MaterialSelect suggestions={suggestions} />

Using the Material-UI TextField does not open the dropdown or display any of the adornments. I also tried passing in {...props.selectProps} instead of {...props} to the TextField with no luck

I also tried passing the ponents in individually using the InputProps prop for TextField with no luck. Using menuIsOpen on my Select ponent renders the menu as expected, however typing in to the TextField produces no results, no adornments, etc.

Working with react-select@next and following the example here for custom Control ponents does not give the expected result.

import TextField from "@material-ui/core/TextField";
import Select from "react-select";

const InputComponent = (props) => {
    return (
        <TextField {...props} />
    );
};

export const MaterialSelect = (props) => {
    const { suggestions, ...other } = props;
    return (
            <Select
                options={suggestions}
                ponents={{
                    Control: InputComponent,
                }}
                {...other}
            />
    );
};

const suggestions = [
    {
        label: "Test One",
        value: "testOne",
    },
    {
        label: "Test Two",
        value: "testTwo",
    },
];

<MaterialSelect suggestions={suggestions} />

Using the Material-UI TextField does not open the dropdown or display any of the adornments. I also tried passing in {...props.selectProps} instead of {...props} to the TextField with no luck

I also tried passing the ponents in individually using the InputProps prop for TextField with no luck. Using menuIsOpen on my Select ponent renders the menu as expected, however typing in to the TextField produces no results, no adornments, etc.

• javascript
• reactjs
• material-design
• material-ui
• react-select

Share Improve this question Follow edited Jul 6, 2018 at 23:11 Naji asked Jul 6, 2018 at 19:21 NajiNaji 74222 gold badges1818 silver badges3636 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

It seems you are struggling to make react select looks like material. assuming that I can give you an example:

first you need to implement your Options looks like material:

class Option extends React.Component {
  handleClick = event => {
    this.props.selectOption(this.props.data, event);
  };

  render() {
    const { children, isFocused, isSelected, onFocus } = this.props;
    console.log(this.props);
    return (
      <MenuItem
        onFocus={onFocus}
        selected={isFocused}
        onClick={this.handleClick}
        ponent="div"
        style={{
          fontWeight: isSelected ? 500 : 400
        }}
      >
        {children}
      </MenuItem>
    );
  }
}

then you need to wrap react-select and put is as a inputComponent prop in material-ui Input.

function SelectWrapped(props) {
  const { classes, ...other } = props;

  return (
    <Select
      ponents={{
        Option: Option,
        DropdownIndicator: ArrowDropDownIcon
      }}
      styles={customStyles}
      isClearable={true}
      {...other}
    />
  );
}

then use it as:

 <div className={classes.root}>
    <Input
      fullWidth
      inputComponent={SelectWrapped}
      value={this.state.value}
      onChange={this.handleChange}
      placeholder="Search your values"
      id="react-select-single"
      inputProps={{
        options: testOptions
      }}
    />
  </div>

please fins that I have passes the options as inputProps in the example.

here is a working example: https://codesandbox.io/s/nk2mkvx92p

please find these customStyles in the demo which make more material feel in your ponent.

hope this will you.

本文标签： javascriptReactselect custom Control does not render select componentsStack Overflow