[英]React-select: custom Control does not render select components
与工作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
键入不会产生任何结果,没有装饰等。
看来您正在努力使反应选择看起来像素材。 假设我可以举一个例子:
首先,您需要实现您的“选项”,就像材料一样:
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 ,使您的组件更具材质感。
希望你能。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.