React onClick TypeError: Невозможно прочитать свойство 'значение' из неопределенного - PullRequest
Новая
       7

React onClick TypeError: Невозможно прочитать свойство 'значение' из неопределенного

0 голосов
/ 30 марта 2020

Я пытаюсь сделать простую кнопку сброса, используя onClick для отправки строки функции. 

<button
      type='reset'
      value='Reset'
      id='reset-btn'
      onClick={() => {
        this.onInputChange('0')
      }}
      >
      Reset
      </button>

У меня есть функция onInputChange, которая принимает входное значение. С console.log (событие) в функции onInputChange я знаю, что я передал аргумент от onClick, потому что я могу напечатать аргумент в консоли. 

 onInputChange = (event) => {
    console.log('event: ', event);
    let eventString = event.target.value;
    let validArray = eventString.split('');
    // Allow only binary digits in the input
    for (let i=0; i < eventString.length; i++) {
      if (validArray[i] !== '0' && validArray[i] !== '1') {
        validArray.splice(i, 1);
        event.target.value = validArray.join('');
      } 
    }
    return this.bin2Dec(validArray.join(''));
}

Так почему мое приложение разрывается, и я получаю TypeError: Не удается прочитать свойство 'значение' из неопределенного?

1 Ответ

1 голос
/ 30 марта 2020

Ну, проблема здесь в том, как вы вызываете this.onInputChange: способ, которым вы вызываете метод onInputChange, получит только параметр '0'. Событие не передается в функцию: 

onClick={() => {
  this.onInputChange('0')
}}

Итак, вы пытаетесь получить значение '0'.target.value, которое не имеет смысла, и поэтому выдается typeError.

У вас есть четыре варианта:

Опция 1 : Получите прямой доступ к значению '0' вместо того, чтобы пытаться получить его из события, которого у вас нет. Вы уже передаете свою ценность в свою функцию. Ваша переменная 'event' уже должна иметь значение '0'. (я бы рассмотрел переименование аргумента, если вы выберете эту опцию)

Опция 2 : передать событие в функцию следующим образом: 

<button
  type='reset'
  value='Reset'
  id='reset-btn'
  onClick={(event) => {
    this.onInputChange(event, '0')
  }}
>
//... and your method gets an additional parameter:
onInputChange = (event, value) => {
  console.log('event: ', event);
  // event is the onCLickEvent, value is '0'
}

Опция 3 : Вы можете поместить имя метода непосредственно в обработчик onClick, и событие будет передано автоматически. (Нижняя сторона: вы не можете добавить аргумент '0' непосредственно в качестве параметра при вызове, вместо этого вам нужно прочитать его из вашего событие, например, из атрибута значения данных) 

 <button
   type='reset'
   value='Reset'
   id='reset-btn'
   data-value="0"
    onClick={this.onInputChange}
  >
  //... and your method stays the same:
  onInputChange = (event) => {
    console.log('event: ', event);
    //event.target.dataset.value is '0'
  }

Опция 4 : отправить «поддельное» событие в качестве параметра: 

 <button
   type='reset'
   value='Reset'
   id='reset-btn'
   onClick={() => {
     this.onInputChange({target: {value: '0'}})
   }}
 >
...