Блог

Главная - Вопросы по программированию - как получить идентификатор выбранного элемента с помощью reactjs

как получить идентификатор выбранного элемента с помощью reactjs

#javascript #reactjs

#javascript #reactjs

Вопрос:

Моя цель — получить идентификатор выбранного элемента из выпадающего списка. Я не смог получить идентификатор соответствующего элемента.

вот массив выглядит так

 [
{
id: "sdfgh47ddtrgy_8dfstdf"
name: "Orange"
},
{
id: "qwert47ddtrgy_8dfstdf"
name: "Apple"
},
{
id: "ufnhur18fgve_8dfstdf"
name: "Banana"
},
]

Я присвоил переменной состояния: fruits: []

В выпадающем списке я сопоставил таким образом:

 {this.state.fruits.map((fruit) =>
 <MenuItem value={fruit.name} key={fruit.id}>{fruit.name}</MenuItem>
)}

Метод onChange:

 OnChange = (e)=> {
 let value = this.state.fruits.filter((item) => item.id == e.target.value)
 console.log("Value", value)
}

я получаю пустой массив. Кто-нибудь может помочь мне, где я ошибаюсь?

Комментарии:

1. Можете ли вы предоставить более полный пример, то есть то, что отображает плоды и имеет обработчик onChange?

2. <Значение элемента меню={fruit.name } ключ={fruit.id }>{fruit.name }</MenuItem> я думаю, что вам следует изменить это на <Значение MenuItem={fruit.id } ключ={fruit.id }>{fruit.name }</MenuItem> вы добавляете имя к значению и принимаете его

3. Какое значение e вы получаете? Это json или объект события?

4. Как @NurbekBoymurodov говорит выше, или просто добавить дополнительный id реквизит?

5. Если вы собираетесь сравнивать элементы, чтобы проверить, совпадают ли они, пожалуйста, используйте «===» вместо «==»

Ответ №1:

Измените это:

  {this.state.fruits.map((fruit) =>
    <MenuItem value={fruit.name} key={fruit.id}>{fruit.name} 
    </MenuItem>
 )}

Для:

 {this.state.fruits.map((fruit) =>
  <MenuItem value={fruit.id} key={fruit.id}>{fruit.name} 
  </MenuItem>
)}

и onChange будет:

 OnChange =(e)=> {
 let value = this.state.fruits.filter(item => item.id === e.target.value)
 console.log("Value", value)
}

попробуйте это. это должно сработать.

Ответ №2:

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

 {this.state.fruits.map((fruit) =>
   <MenuItem value={fruit.id/* important*/} key={fruit.id}>{fruit.name} </MenuItem>
)}

onChange:

 OnChange = (e)=> {
   let value = e.target.value
   console.log("Value", value)
}