[英]TextField in Material UI won't display label after selection
TextField of Material UI won't display the label after I select. 选择后,材质UI的TextField将不会显示标签。 However the state and value is updated correctly.
但是,状态和值已正确更新。 I have already put
{option.label}
but it won't display. 我已经放了
{option.label}
但不会显示。 Anyone can help? 有人可以帮忙吗? This is my text field.
这是我的文本字段。
<TextField
id="standard-select-currency"
select
fullWidth
label="Filter By"
defaultValue= "lala"
InputLabelProps={{
shrink: true,
style: { color: '#fff' }
}}
margin="normal"
value={props.filter}
onChange={props.handleChange('filter')}
>
{currencies.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
This is my currency 这是我的货币
const currencies = [
{
value: 'USD',
label: 'usd',
},
{
value: 'EUR',
label: 'eur',
},
{
value: 'BTC',
label: 'btc',
},
{
value: 'JPY',
label: 'jpy',
},
];
The drop downlist is worked correctly and the state of react is updated. 下拉列表正常工作,react状态已更新。
But the label won't display after the selection 但是选择后标签不会显示
This is the codesandbox I created for this case. 这是我为此案例创建的codeandbox 。
You are specifying value={props.filter}
on your TextField
, but you aren't specifying a filter
prop to MyMapComponent
. 您要在
TextField
上指定value={props.filter}
,但没有为MyMapComponent
指定filter
MyMapComponent
。
If you change: 如果您更改:
render() {
//console.log("render::::::::::::::::::::");
return (
<MyMapComponent
handleChange={this.handleChange}
/>
);
}
to add filter={this.state.filter}
as follows: 添加
filter={this.state.filter}
,如下所示:
render() {
//console.log("render::::::::::::::::::::");
return (
<MyMapComponent
filter={this.state.filter}
handleChange={this.handleChange}
/>
);
}
then it works. 然后就可以了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.