Material UI 中的 TextField 在选择后不会显示标签

Question

Material UI 的 TextField 在我 select 之后不会显示标签。但是，状态和值已正确更新。我已经输入了 {option.label} 但是它不会显示。任何人都可以帮忙吗？这是我的文本字段。

<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>

这是我的货币

const currencies = [
  {
    value: 'USD',
    label: 'usd',
  },
  {
    value: 'EUR',
    label: 'eur',
  },
  {
    value: 'BTC',
    label: 'btc',
  },
  {
    value: 'JPY',
    label: 'jpy',
  },
];

下拉列表工作正常，反应状态更新。

但是在 selection 之后标签不会显示

这是 codesandbox我为这个案例创建的。

Answer 1

您在 TextField 上指定了 value={props.filter}，但没有为 MyMapComponent 指定 filter 道具。

如果你改变：

  render() {
    //console.log("render::::::::::::::::::::");
    return (
      <MyMapComponent
        handleChange={this.handleChange}
      />
    );
  }

添加filter={this.state.filter}如下：

  render() {
    //console.log("render::::::::::::::::::::");
    return (
      <MyMapComponent
        filter={this.state.filter}
        handleChange={this.handleChange}
      />
    );
  }

然后就可以了。

Material UI 中的 TextField 在选择后不会显示标签

TextField in Material UI won't display label after selection

javascript

textview

reactjs

material-ui

dropdown