V1
обратитесь к документации отсюда: https://material-ui.com/demos/autocomplete/
он предоставляет четкую документацию о том, как использовать response-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
обратитесь к документации из response select, и вы можете добавить больше изменений, если хотите.
надеюсь, это поможет вам.
person
Nadun
schedule
15.06.2018