React组件中onChange箭头函数改普通JS函数并加日志可行吗？

这在React类组件里是非常常见的写法调整，我来给你一步步拆解具体怎么做：

核心思路 #

你需要把原来内联的箭头函数抽成类的普通方法，关键是要给这个方法绑定组件实例的this——因为类方法默认不会自动绑定this，如果不绑定，方法里的this会指向undefined（严格模式下），就没法调用setState了。

完整实现代码 #

下面是调整后的完整组件代码，我用了性能更优的构造函数绑定方式：

class App extends React.Component {
  constructor(props) {
    super(props);
    // 初始化state
    this.state = {
      input: ''
    };
    // 绑定处理函数的this到组件实例，只执行一次
    this.handleInputChange = this.handleInputChange.bind(this);
    this.submit = this.submit.bind(this); // 顺便把submit方法也统一绑定
  }

  // 普通的类方法，替代原来的箭头函数
  handleInputChange(e) {
    // 执行你要的console.log
    console.log('输入框事件对象:', e);
    // 更新state
    this.setState({ input: e.target.value });
  }

  submit(e) {
    e.preventDefault();
    // 这里可以添加你的提交逻辑，比如处理items
    console.log('提交的内容:', this.state.input);
  }

  render() {
    // 假设这里是你的items渲染逻辑，比如从state或props获取
    const items = [];
    return (
      <div className='App'>
        <form onSubmit={this.submit}>
          <input
            value={this.state.input}
            onChange={this.handleInputChange} {/* 直接引用绑定后的方法 */}
            type='text'
          />
        </form>
        <ul>{items}</ul>
      </div>
    );
  }
}

可选的绑定方式（方式二） #

如果你不想在构造函数里绑定，也可以直接在JSX里绑定，写法如下：

<input
  value={this.state.input}
  onChange={this.handleInputChange.bind(this)} {/* 直接在这里绑定 */}
  type='text'
/>

不过这种方式每次组件渲染都会生成一个新的函数实例，性能略逊于构造函数绑定，适合简单场景。

为什么要绑定this？ #

在React类组件的普通方法中，this默认是undefined（因为类和模块默认启用严格模式）。只有把this绑定到组件实例，方法里才能访问到this.state和this.setState这些组件的属性和方法。

这样调整后，就完全实现了你想要的效果：把onChange的箭头函数改成普通JavaScript函数，同时在函数里执行console.log(e)和setState操作～

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