时间戳

首页 > 解决方案 > 材质 UI 选择的选项未显示在选择框中

css - 材质 UI 选择的选项未显示在选择框中

问题描述

我有以下内容：

--- 渲染前 ---

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

给...

解决了！

标签： cssreactjsuser-interfacefontsmaterial-ui

解决方案

您可以使用 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>

推荐阅读