材质 UI 选定选项未显示在选择框中

Question

我有以下几点：

--- 渲染前 ---

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)}
<...>

给...

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