Выбранный пользовательский интерфейс материала не отображается в окне выбора - PullRequest
Новая
       3

Выбранный пользовательский интерфейс материала не отображается в окне выбора

0 голосов
/ 22 февраля 2019

У меня есть следующее:

--- перед рендерингом --- 

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

Итак, я хочу иметь возможностьвыбрать шрифт, где отображается шрифт.Это почти работает.Например, когда я нажимаю на кнопку выбора, я получаю:

clicked select

Однако сам выбор пуст (даже когда я подтвердил, что состояние заполнено):

empty select

Что я делаю не так? Может, 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)}
<...>

Дает ...

Solved!

1 Ответ

0 голосов
/ 22 февраля 2019

Вы можете использовать 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>
...