Реакция: попытка получить значения <li> возвращает undefined

Учитывая следующий фрагмент кода, я пытаюсь получить (журнал консоли) текстовые значения в <li>, но все равно получаю undefined. Я пробовал различные решения на SO, но безрезультатно.

export class List extends React.Component<{}, IState> {
    constructor(props) {
        super(props);
        this.state = {
            list: ['top', 'middle', 'bottom']
        }
        this.updateReview = this.updateReview.bind(this);
    }
    
    updateReview = (e) => {
        // e.preventDefault()
        console.info(e.target.value);
        // console.info(e.currentTarget.id);
    }

    render() {  
        let { list } = this.state;
        
        return (
           
               <div>
                  {list.map((value, key) => {
                      return (
                          <li  onClick = {(x)=>this.updateReview(x)} key = {key}>
                                {value}
                          </li>        
                       );
                    })
                 }
              </div>
        );
    }
}

Элементы, не являющиеся полями формы, не имеют value. Так же, как и в ячейках таблицы (см. Ответы на связанные вопросы), элементы li имеют содержимое, но не элементы value.

T.J. Crowder 27.11.2018 19:40

вы устанавливаете list равным this.state, затем перебираете состояние, НЕТ - массив комментариев.

Toby 27.11.2018 19:41

Кстати, нет необходимости связывать updateReview, поскольку вы вызываете его из стрелочной функции в render.

T.J. Crowder 27.11.2018 19:41

мои извинения. ive изменил «комментарии» на «список». Я просто создавал демонстрацию для stackoverflow

colin_dev256 27.11.2018 19:44

В показанном коде просто передайте value в updateReview напрямую: onClick = {() => this.updateReview(value);}. Нет причин для этого проходить через DOM.

T.J. Crowder 27.11.2018 19:46

Замените onClick = {(x)=>this.updateReview(x)} на onClick = {()=>this.updateReview(value)}, затем в updateReview просто зарегистрируйте value, e.target не требуется.

Toby 27.11.2018 19:46

Спасибо! Мышление было основано на ценностях «формы».

colin_dev256 27.11.2018 19:49
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
7
36
0

Другие вопросы по теме