反應選擇：自定義控件不會呈現選擇組件

Question

與工作react-select@next和下面的例子在這里定制Control部件不給預期的結果。

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}
                components={{
                    Control: InputComponent,
                }}
                {...other}
            />
    );
};

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

<MaterialSelect suggestions={suggestions} />

使用Material-UI TextField不會打開下拉列表或顯示任何裝飾。 我也嘗試將{...props.selectProps}而不是{...props}傳遞給TextField ，但沒有運氣。

我也嘗試使用InputProps道具為TextField單獨傳遞組件，但沒有運氣。 在我的Select組件上使用menuIsOpen按預期呈現菜單，但是在TextField鍵入不會產生任何結果，沒有裝飾等。

Answer 1

看來您正在努力使反應選擇看起來像素材。 假設我可以舉一個例子：

首先，您需要實現您的“選項”，就像材料一樣：

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}
        component="div"
        style={{
          fontWeight: isSelected ? 500 : 400
        }}
      >
        {children}
      </MenuItem>
    );
  }
}

那么您需要包裝react-select並將put作為material-ui Input中的inputComponent屬性 。

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

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

然后將其用作：

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

請注意，我已經在示例中將選項作為inputProps傳遞了。

這是一個工作示例： https : //codesandbox.io/s/nk2mkvx92p

請在演示中找到這些customStyles ，使您的組件更具材質感。

希望你能。