React Redux获取用户输入值：handleChange中this为undefined报错

这个问题我太熟了！在React类组件里，类方法默认不会自动绑定this，所以当你把handleChange传给input的onChange事件时，它的this就丢失了，变成undefined。给你几个常用的解决办法：

1. 在构造函数里手动绑定this #

这是最经典的解决方案，在组件初始化时就把handleChange的this绑定到组件实例上：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { inputValue: '' };
    // 关键步骤：绑定this到组件实例
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    // 现在this就能正确指向组件实例了
    this.setState({ inputValue: e.target.value });
    // 之后可以用this.state.inputValue作为参数调用fetchData
  }

  render() {
    return <input onChange={this.handleChange} value={this.state.inputValue} />;
  }
}

2. 用箭头函数定义handleChange #

箭头函数会自动捕获当前上下文的this，所以不用手动绑定，写法更简洁：

class YourComponent extends React.Component {
  state = { inputValue: '' };

  // 箭头函数自动绑定组件实例的this
  handleChange = (e) => {
    this.setState({ inputValue: e.target.value });
  };

  render() {
    return <input onChange={this.handleChange} value={this.state.inputValue} />;
  }
}

3. 在render里用箭头函数包裹（不推荐高频渲染组件） #

这种方式每次render都会创建新的函数，可能影响性能，适合简单场景：

class YourComponent extends React.Component {
  state = { inputValue: '' };

  handleChange(e) {
    this.setState({ inputValue: e.target.value });
  }

  render() {
    // 箭头函数会把this绑定到当前组件实例
    return <input onChange={(e) => this.handleChange(e)} value={this.state.inputValue} />;
  }
}

额外提示：如果是函数组件的话 #

函数组件里根本不用操心this的问题，直接用useState钩子就行：

import { useState } from 'react';

function YourComponent() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
    // 直接用inputValue作为参数调用fetchData即可
  };

  return <input onChange={handleChange} value={inputValue} />;
}

解决完this的问题后，你就可以在合适的时机（比如输入完成、点击查询按钮）调用Redux的fetchData action，把输入值作为参数传进去啦～

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