TextField в интерфейсе материалов не будет отображать метку после выбора

Question

TextField of Material UI не будет отображать метку после выбора. Однако состояние и значение обновляются правильно. Я уже поставил {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',
  },
];

Раскрывающийся список работает правильно, а состояние реакции обновляется.

Но метка не будет отображаться после выбора

Это codesandbox Я создал для этого случая.

Answer 1

Вы указываете value={props.filter} на TextField, но не указываете filter реквизит MyMapComponent.

Если вы измените:

  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}
      />
    );
  }

тогда это работает.