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

with

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

주는 ...