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

【问题标题】：TextField in Material UI won't display label after selectionMaterial UI中的TextField在选择后不会显示标签
【发布时间】：2019-06-25 09:35:42
【问题描述】：

Material 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我为这个案例创建的。

【问题讨论】：

如果你能发布一个选择器的演示会很有帮助。因为好像是选择器的值有问题。
请分享一个可以重现您的问题的 CodeSandbox。以下是您迄今为止提供的代码的起点：codesandbox.io/s/currency-select-oe4rm（但它没有说明您的问题）。
@fg93 我已经为这个案例创建了一个演示
@RyanCogswell 我已经分享了这个案例的 CodeSandbox
您的沙盒对我不起作用。它会短暂显示一张地图，然后显示“糟糕！出了点问题”。消息，并且有许多控制台错误。

标签： javascript reactjs textview material-ui dropdown

【解决方案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}
      />
    );
  }

然后就可以了。

【讨论】：

这是一个简单的错误。我一直在调试文本字段部分，但从未注意到这部分。