使用react-select@next
并遵循自定义Control
组件的示例here不会产生预期的结果。
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
的{{1}}道具来单独传递组件,但是没有运气。在TextField
组件上使用menuIsOpen
会按预期呈现菜单,但是输入Select
不会产生任何结果,也不会产生装饰等。
答案 0 :(得分:4)
看来您正在努力使反应选择看起来像材料。 假设我可以举一个例子:
首先,您需要实现您的“选项”,就像材料一样:
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 ,它们会使您的组件更具材质感。
希望你能这样做。