Получить выбранное значение из выпадающего меню al oop, созданного в React - PullRequest
Новая
       23

Получить выбранное значение из выпадающего меню al oop, созданного в React

0 голосов
/ 01 августа 2020

Я хотел бы знать, как правильно создать несколько раскрывающихся меню (<select>) с al oop, где я могу получить доступ к их выбранному значению с помощью кнопки . Я попытался воссоздать то, что у меня сейчас есть в моем коде, поэтому я надеюсь, что этого достаточно.

(Я помещаю элементы <select> в массив, потому что я использую разные массивы для создания таблицы с строк в моем исходном коде.)

В настоящее время getValue(), который пытается получить значение из 1-го раскрывающегося меню, печатает '', которое является начальным значением, даже когда я измените значение в меню. Я думаю, проблема в том, что размещение их в массиве заставляет их не обновлять собственное значение при изменении. Есть ли способ обойти эту проблему?

Этот код также приводит к тому, что this.state.value устанавливается только в последнем измененном раскрывающемся меню. Я понимаю, почему это происходит, но не знаю, как это обойти. 

interface Props extends PanelProps<Options> {}

export class TablePanel extends Component<Props,{value: string, staterows:JSX.Element[]}> {
  constructor(props: Props) {
    super(props);
    this.handleUniqueSelect = this.handleUniqueSelect.bind(this)
    this.state = {value: '', staterows:[] }
  }

  handleUniqueSelect(val:any){
     this.setState({value: val.currentTarget.value})    
  }

  populateRows(){
     let rows:any = []
     for(let index = 0; index < 10; index++) {
        rows.push(<select value={this.state.value} onChange={this.handleUniqueSelect }>
                        <option value="volvo">Volvo</option>
                        <option value="saab">Saab</option>
                        <option value="mercedes">Mercedes</option>
                        <option value="audi">Audi</option>
                     </select>
                 );
     }
     this.setState({staterows: rows})    
  } 



 getValue(){
   if(this.state.staterows.length === 0)
    this.populateRows()
   console.log(this.state.staterows[0].props.value);
 }

 render(){
  
    return (
           <div>
            {this.state.staterows}     
             <button type='button' onClick={e=>this.getValue()} >Button</button>
           </div>   
          );
  }
}

Я добавил пример в Sandbox . Я изменил console.log(this.state.staterows[0].props.value); на console.log(this.state.staterows[0]);, потому что были проблемы с поиском свойств неизвестного типа.

1 Ответ

1 голос
/ 01 августа 2020

Вот рабочий codeandbox .

Обратите внимание, что вы можете вернуть разметку непосредственно из функции без необходимости сначала сохранять в состоянии, это то, что я сделал с populateRows.

Значение каждого раскрывающегося списка должно быть сопоставлено с конкретным c индексом массива в состоянии (или какой-либо другой подобной структуре данных для хранения нескольких значений). Это сопоставляет заданное значение раскрывающегося списка с конкретным элементом c в массиве: элементы value={this.state.values[index]}

HTML в функции map в React должны иметь уникальный атрибут key, чтобы React мог правильно посмотреть, что изменилось между рендерами (на самом деле это еще не все, но это еще один топи c). В моем случае я выбрал индекс только для примера, но вы можете погуглить об этом и посмотреть, как правильно выбрать уникальный ключ (лучше использовать какой-то известный идентификатор).

Первоначально массив в состоянии пуст, поэтому вы получите [] для строкового значения внизу. Когда вы меняете значения в раскрывающемся списке, массив будет заполняться / изменяться.

Надеюсь, это поможет и, конечно, спросите, есть ли что-то неясное.

...