Выбранное значение не отображается в текстовом поле Select - Material UI React Component

У меня есть компоненты пользовательского интерфейса TextField Select Material на основе определенного количества значений в переменной.

{this.state.selectedNextHops.map((nextHop, index) => (
              <div>
                <TextField
                    select
                    className="vnfprofile-field"
                    InputProps={{ className: 'variable-value site-details-view-textfield' }}
                    InputLabelProps={{ shrink: true }}
                    SelectProps={{
                        MenuProps: {
                            className: 'vnf-designer-value',
                            getContentAnchorEl: null,
                            anchorOrigin: {
                                vertical: 'bottom',
                                horizontal: 'left',
                            }
                        },
                    }}
                    value = {this.state.selectedNextHops[index] || ''}
                    disabled={this.props.newPopoverPanelView === 'VIEW' ? true : false}
                    onChange={(e) => this.handleChange('nexthop', e)}
                  >
                    {this.state.remainingNextHops.length !== 0 ? this.state.remainingNextHops.map((option, i) => (
                        <MenuItem key ={i} value = {option || ''}>
                          {option}
                        </MenuItem>
                      )) :
                        <MenuItem value = {'No Data Available'}>
                            {'No Data Available'}
                        </MenuItem>}
                  </TextField>
                  <TextField
                    className="vnfprofile-field subnet-textfield"
                    InputProps={{ className: 'variable-value' }}
                    InputLabelProps={{ shrink: true }}
                    value = {'29'}
                  />
                </div>
                ))
          }

Текстовые поля отображаются последовательно, когда я выбираю значение из предыдущего раскрывающегося списка и фильтрую меню на основе предыдущего выбора.

if(selectedNextHops.indexOf(event.target.value) === -1) {
            selectedNextHops.push(event.target.value);
        }
        remainingNextHops = this.props.nextHopSapds.filter(nextHop => selectedNextHops.indexOf(nextHop) === -1);

this.setState({
            selectedNextHops: selectedNextHops,
            remainingNextHops: remainingNextHops
        });

Обновление: вот мой метод handleChange ->

handleChange(type, event) {
    let selectedNextHops = JSON.parse(JSON.stringify(this.state.selectedNextHops));
    let remainingNextHops = [];
    if(type === 'nexthop') {
        selectedNextHops = selectedNextHops.filter(nh => nh !== '');
        isContentChanged = true;
        if(selectedNextHops.indexOf(event.target.value) === -1) {
            selectedNextHops.push(event.target.value);
        }
        remainingNextHops = this.props.nextHopSapds.filter(nextHop => selectedNextHops.indexOf(nextHop) === -1);
        if(remainingNextHops.length !== 0) {
            selectedNextHops.push('');
        }
        this.setState({
            selectedNextHops: selectedNextHops,
            remainingNextHops: remainingNextHops
        });
    }
  }

Состояние обновляется нормально, но в текстовом поле не отображается выбранное значение. Я перепробовал все, что знал. Любая помощь приветствуется.


reactjs textfield drop-down-menu material-ui react-state
person vjeta    schedule 02.05.2019    source источник
comment
Поделитесь, пожалуйста, своим handleChange методом. Почему есть value = {'29'} опора?   -  person Dupocas    schedule 03.05.2019
comment
Я всегда хочу показать 29 в этом поле   -  person vjeta    schedule 03.05.2019
comment
CodeSandbox, воспроизводящий вашу проблему, значительно упростит оказание помощи.   -  person Ryan Cogswell    schedule 03.05.2019
comment
@Katamari, не могли бы вы создать демонстрацию в Code Sandbox, как это предложил Райан. В противном случае вам, ребята, действительно сложно помочь.   -  person maximus ツ    schedule 29.08.2019
comment
@maximus codeandbox.io/embed/priceless-dijkstra-oqxzi Я пробовал сварить оба проблема с моей и OP до простой версии, состояние значения устанавливается, но не отображается   -  person Katamari    schedule 29.08.2019
comment
Целевые значения @Katamari, используемые для установки состояния / выбора входа, неверны. Проверьте эту исправленную демонстрацию codeanbox. codesandbox.io/s/great-lumiere-dgmyf Вы можете получить дополнительное значение для каждого пункта меню, используя event.currentTarget.dataset в обработчике даже.   -  person maximus ツ    schedule 02.09.2019

Ответы (2)


arrow_upward
3
arrow_downward

Это сложно отлаживать, не видя рабочего фрагмента или состояния (особенно this.state.selectedNextHops), но на основе песочница кода (в комментарии), я предполагаю, что это та же проблема, поэтому этот ответ будет применяться к коду песочницы:

this.setState({
  selectedID: event.target.value.id,
  visibleValue: event.target.value.name
});

event.target.value.id и event.target.value.name равны undefined,

console.log(console.log(event.target)) // {value: "S0002", name: undefined}

Чтобы select отображал выбранный option, атрибут value для обоих должен совпадать:

<select value="2">
        ^^^^^^^^^
  <option value="1">first value</option>
  <option value="2">second value</option>
          ^^^^^^^^^ 
</select>

в примере в изолированной программной среде кода значение Select равно value={this.state.visibleValue}, а значения параметров value={x.label}

Поскольку this.state.visibleValue всегда undefined, вы никогда не увидите значение обновления select.

Быстрое решение этой проблемы - изменить функцию handleChage на:

handleChangeTest = event => {
  this.setState({
    selectedID: event.target.id,
    visibleValue: event.target.value
  });
};

но это оставит selectedID неопределенным, чтобы установить его, добавьте атрибут id={x.id} к option и используйте event.currentTarget, чтобы получить его значение:

{this.state.data.map(x => (
  <MenuItem key={x.id} value={x.label} id={x.id}>
                                      ^^^^^^^^^
    {x.name}
  </MenuItem>
))}

А также

handleChangeTest = event => {    
  this.setState({
    selectedID: event.currentTarget.id,
                ^^^^^^^^^^^^^^^^^^^^^^
    visibleValue: event.target.value
  });
};

Рабочая песочница

person Taki    schedule 30.08.2019

arrow_upward
3
arrow_downward

Итак, вы пытаетесь получить доступ к ключу с помощью e.target.value.id, но целевой объект имеет только значение, а не сам идентификатор. Вот почему он не определен после вызова метода handleChange. Однако есть способ получить доступ к ключу:

Обратный вызов передает не только событие, но и дочерний объект в качестве второго параметра, и это можно использовать для получения ключа следующим образом:

handleChangeTest = (event, child) => {
    this.setState({
      selectedID: child.key,
      visibleValue: event.target.value
    });
  };

Это установит ключ как selectedID и значение выбранного элемента как visibleValue.

person Domino987    schedule 29.08.2019