css - Material 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>