gpt4 book ai didi

material-ui - 使用material-ui设计react-select v2 - 替换输入组件

转载 作者:行者123 更新时间:2023-12-02 21:50:48 26 4
gpt4 key购买 nike

我在使用 Material UI 中的输入组件替换 React-Select v2 的输入组件时遇到问题。

到目前为止,我已在下面的代码和框中进行了尝试,但无法在输入输入时调用过滤?

https://codesandbox.io/s/jjjwoj3yz9

此外,如果您能提供有关选项替换实现的任何反馈,我们将不胜感激。我是否以正确的方式获取单击选项的文本并从选项列表中搜索 Option 对象以传递给 selectOption 函数?

非常感谢,埃里克

最佳答案

V1

请参阅此处的文档:https://material-ui.com/demos/autocomplete/

它提供了有关如何将react-select与material-ui结合使用的清晰文档

这是您的问题的一个工作示例:https://codesandbox.io/s/p9jpl9l827

如您所见,material-ui 输入组件可以将 react-select 作为 inputComponent

V2

与之前的方法几乎相同:

实现输入组件:

<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 的文档,如果您愿意,您可以添加更多更改。

希望这些对你有帮助。

关于material-ui - 使用material-ui设计react-select v2 - 替换输入组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50863495/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com