React onClick报错：TypeError: Cannot read property 'value' of undefined 求助

你遇到的TypeError: Cannot read property 'value' of undefined错误，核心原因是参数类型不匹配：

• 你的按钮onClick里直接传递了字符串'0'给onInputChange函数：

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

• 但你的onInputChange函数是按照接收DOM事件对象来编写的，它试图访问event.target.value——可此时event变量实际是字符串'0'，根本没有target属性，自然会抛出这个错误。

根据你的需求，这里提供两种可行的修改方向：

方向一：让函数兼容两种参数类型 #

修改onInputChange，让它既能处理事件对象，也能直接接收字符串参数：

onInputChange = (input) => {
  // 判断传入的是事件对象还是直接的字符串，获取对应的值
  let inputValue = typeof input === 'object' ? input.target.value : input;
  console.log('input value: ', inputValue);

  // 过滤非二进制字符（用filter替代循环更简洁）
  const validArray = inputValue.split('').filter(char => char === '0' || char === '1');
  const cleanedValue = validArray.join('');

  // 如果是事件对象，更新输入框的显示值
  if (typeof input === 'object') {
    input.target.value = cleanedValue;
  }

  return this.bin2Dec(cleanedValue);
}

这样不管是输入框的onChange（传递事件对象），还是重置按钮的点击（传递字符串'0'），函数都能正常工作。

方向二：改用状态管理输入值（更符合React数据流） #

如果你的项目是基于React的，更推荐用组件状态来管理输入值，重置时直接更新状态即可，避免直接操作DOM：

// 假设组件的初始状态
state = { inputValue: '' };

// 重置按钮的点击事件直接更新状态，并调用转换函数
<button 
  type='reset' 
  value='Reset' 
  id='reset-btn' 
  onClick={() => {
    const resetValue = '0';
    this.setState({ inputValue: resetValue }, () => this.bin2Dec(resetValue));
  }} 
> 
  Reset 
</button>

// 输入框绑定状态和处理函数
<input 
  value={this.state.inputValue} 
  onChange={this.onInputChange} 
/>

// 修改后的输入处理函数
onInputChange = (event) => {
  let inputValue = event.target.value;
  // 过滤非二进制字符
  const validArray = inputValue.split('').filter(char => char === '0' || char === '1');
  const cleanedValue = validArray.join('');
  
  // 更新状态，触发重新渲染
  this.setState({ inputValue: cleanedValue }, () => {
    this.bin2Dec(cleanedValue);
  });
}

这种方式遵循React的单向数据流，代码更易维护，也避免了直接操作DOM的潜在问题。

内容的提问来源于stack exchange，提问作者Alon Joshua