材质 UI 选择的选项未显示在选择框中答案

【问题标题】：Material UI Selected Option Not Showing in Select Box材质 UI 选择的选项未显示在选择框中
【发布时间】：2019-07-16 02:39:36
【问题描述】：

我有以下：

--- 渲染前 ---

const fontArray = [
  ["Standard", "Standard"], ["Abril FatFace", "'Abril Fatface', cursive"], 
  ["Alfa Slab One", "'Alfa Slab One', cursive"], 
  ["Chonburi", "'Chonburi', cursive"], ["Comfortaa", "'Comfortaa', cursive"], 
  ["Lobster", "'Lobster', cursive"],   ["Pacfico", "'Pacifico', cursive"]
]

--- 在渲染中---

<FormControl style={{margin: '10px'}}>
  <InputLabel htmlFor="select-font">Font</InputLabel>
  <Select
    value={this.state.font[0]}
    onChange={(evt)=>this.handleFontChange(evt)}
    inputProps={{
      name: 'font',
      id: 'select-font',
    }}
  >
    {fontArray.map((font, index)=>{
      return(
        <MenuItem key={font} value={font}>
          <div style={{fontFamily: `${font[1]}`}}>
            {font[0]}
          </div>
        </MenuItem>
      )
    })}
  </Select>
</FormControl>

您可以猜到，当前的font 处于状态。

--- 这是我处理选择更改的方式---

  handleFontChange = (event) => {
    this.setState({ font: event.target.value })
  };

所以我想要的是能够选择字体，显示字体。它几乎有效。例如，当我单击选择时，我得到：

但是，选择本身是空的（即使我已确认已填充状态：

我做错了什么？可能 material-ui 无法处理风格化的默认文本？

编辑：下面的两个答案似乎很接近，但对于我正在尝试做的事情并不完全正确。

如果你替换

<MenuItem key={font} value={font}>

与

<MenuItem key={font} value={font[0]}>

它确实将字体替换为正确的选定值。伟大的！ ...但它也会将this.state.font 替换为this.state.font[0]。我目前正试图通过像这样更改句柄函数来使其工作：

handleFontChange = (event, fontArray, stateData) => {
    let newFont = fontArray.filter(i=>{
      if(i[0]==event.target.value){
        return i
      }
    })
    this.setState({ font: newFont })
  };

这似乎正确设置了this.state.font，但又没有似乎想让选择框显示所选字体。

嗯……

已解决

下面是一个解决方案的修改：

使用

renderValue = (value) => {
    return(
      <div style={{fontFamily: `${value[1]}`}}>
        {value[0]}
      </div>
    )
  }

和

<...>
<Select
value={this.state.font}
renderValue={() => this.renderValue(this.state.font)}
<...>

给...

【问题讨论】：

标签： css reactjs user-interface fonts material-ui

【解决方案1】：

你可以使用 renderValue 来解决这个问题。

renderValue = (value) => {
    return value && value[0];
}

在渲染方法中

    <FormControl style={{margin: 10}}>
       <InputLabel htmlFor="select-font">Font</InputLabel>
       <Select
         value={this.state.font}
          renderValue={() => this.renderValue(this.state.font)}
          onChange={evt => this.handleFontChange(evt)}
          inputProps={{
            name: "font",
            id: "select-font"
          }}
        >
        {fontArray.map((font, index) => {
        return (
         <MenuItem key={index} value={font}>
          <div style={{fontFamily: `${font[1]}`}}>
            {font[0]}
          </div>
         </MenuItem>
         );
        })}
      </Select>
    </FormControl>

【讨论】：

我在这里使用了renderValue 属性作为Select 组件。这样，您仍然可以拥有字体数组，并且可以根据需要进行样式化
完美！我以前没有见过那个选项。我会给你道具并更新上面的问题。亲爱的，干杯。

【解决方案2】：

<...>
<Select
value={this.state.font?this.state.font :defaultvlue}
renderValue={() => this.renderValue(this.state.font)}
<...>

你可以使用三元运算符，如果你有数据显示数据，否则默认值

【讨论】：