[英]React-select: custom Control does not render select components
Working with react-select@next
and following the example here for custom Control
components does not give the expected result. 与工作
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} />
Using the Material-UI TextField does not open the dropdown or display any of the adornments. 使用Material-UI TextField不会打开下拉列表或显示任何装饰。 I also tried passing in
{...props.selectProps}
instead of {...props}
to the TextField
with no luck 我也尝试将
{...props.selectProps}
而不是{...props}
传递给TextField
,但没有运气。
I also tried passing the components in individually using the InputProps
prop for TextField
with no luck. 我也尝试使用
InputProps
道具为TextField
单独传递组件,但没有运气。 Using menuIsOpen
on my Select
component renders the menu as expected, however typing in to the TextField
produces no results, no adornments, etc. 在我的
Select
组件上使用menuIsOpen
按预期呈现菜单,但是在TextField
键入不会产生任何结果,没有装饰等。
It seems you are struggling to make react select looks like material. 看来您正在努力使反应选择看起来像素材。 assuming that I can give you an example:
假设我可以举一个例子:
first you need to implement your Options looks like material: 首先,您需要实现您的“选项”,就像材料一样:
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>
);
}
}
then you need to wrap react-select and put is as a inputComponent prop in material-ui Input. 那么您需要包装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}
/>
);
}
then use it as: 然后将其用作:
<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>
please fins that I have passes the options as inputProps in the example. 请注意,我已经在示例中将选项作为inputProps传递了。
here is a working example: https://codesandbox.io/s/nk2mkvx92p 这是一个工作示例: https : //codesandbox.io/s/nk2mkvx92p
please find these customStyles in the demo which make more material feel in your component. 请在演示中找到这些customStyles ,使您的组件更具材质感。
hope this will you. 希望你能。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.