我在使用Material UI中的Input组件替换react-select v2的Input组件时遇到了问题。
到目前为止,我已经在下面的代码框中尝试过,但是在输入输入时无法调用过滤?
https://codesandbox.io/s/jjjwoj3yz9
此外,任何有关选项更换实施的反馈都将受到赞赏。我是否以正确的方式抓住所单击选项的文本并从我的选项列表中搜索Option对象以传递给selectOption函数?
非常感谢, 埃里克
答案 0 :(得分:8)
<强> V1 强>
请参阅此处的文档:https://material-ui.com/demos/autocomplete/
它提供了有关如何使用react-select with material-ui
的清晰文档以下是您的问题的工作示例:https://codesandbox.io/s/p9jpl9l827
正如您所见,material-ui输入组件可以react-select
作为inputComponent
。
<强> V2 强>
它与之前的方法几乎相同:
实现Input组件:
<div className={classes.root}>
<Input
fullWidth
inputComponent={SelectWrapped}
value={this.state.value}
onChange={this.handleChange}
placeholder="Search your color"
id="react-select-single"
inputProps={{
options: colourOptions
}}
/>
</div>
然后SelectWrapped
组件实现应该是:
function SelectWrapped(props) {
const { classes, ...other } = props;
return (
<Select
components={{
Option: Option,
DropdownIndicator: ArrowDropDownIcon
}}
styles={customStyles}
isClearable={true}
{...other}
/>
);
}
我覆盖了组件Option和DropdownIndicator,使其更具实质性,并添加了customStyles
:
const customStyles = {
control: () => ({
display: "flex",
alignItems: "center",
border: 0,
height: "auto",
background: "transparent",
"&:hover": {
boxShadow: "none"
}
}),
menu: () => ({
backgroundColor: "white",
boxShadow: "1px 2px 6px #888888", // should be changed as material-ui
position: "absolute",
left: 0,
top: `calc(100% + 1px)`,
width: "100%",
zIndex: 2,
maxHeight: ITEM_HEIGHT * 4.5
}),
menuList: () => ({
maxHeight: ITEM_HEIGHT * 4.5,
overflowY: "auto"
})
};
和选项:
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>
);
}
}
请从此处找到示例:https://codesandbox.io/s/7k82j5j1qx
参考react select中的文档,如果愿意,可以添加更多更改。
希望这些能帮到你。