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]。我目前正在尝试通过更改如下所示的handle函数来使其工作：

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>

Answer 2

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

如果您有数据显示数据或其他默认值，则可以使用三元运算符

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

2 个答案: