选择后，材质UI中的TextField将不会显示标签

Question

选择后，材料UI的

TextField将不会显示标签。但是，状态和值已正确更新。我已经放过{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',
  },
];

下拉列表正常工作，react状态已更新。

但是选择后标签不会显示

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

然后它起作用。