React onClick TypeError：无法读取未定义的属性“值”

Question

我正在尝试制作一个简单的重置按钮，使用 onClick 将字符串发送到函数。

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

我有一个接受输入值的 onInputChange 函数。 通过 onInputChange 函数中的 console.log(event)，我知道我从 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: Cannot read property 'value' of undefined？

Answer 1

好吧，这里的问题是如何调用 this.onInputChange： 你调用方法onInputChange的方式只会得到参数'0'。函数中没有传入事件：

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

所以你试图得到 '0'.target.value 这并没有什么意义，因此会抛出 typeError。

这里有四个选项：

选项 1：直接访问值“0”，而不是尝试从您没有的事件中获取它。您已经将您的价值传递给您的函数。您的变量“事件”应该已经具有值“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'}})
   }}
 >