React无法绑定处理器：父组件方法绑定子组件state问题排查

首先，你的核心误解是对bind()的工作机制理解有误，同时代码里还有几个其他问题导致你没得到预期结果，咱们一步步拆解：

1. bind()不会修改原函数，而是返回新函数 #

你在ItemList的constructor里执行this.props.adder.bind(this)，但这个操作只是创建了一个新的、绑定了ItemList实例作为this的函数，并没有替换掉原来的this.props.adder（也就是App的addElement方法）。所以原函数的this指向依然是App（或者严格模式下是undefined，因为你没在App里绑定），而且你也没保存这个新创建的函数，等于白做了。

更关键的是：addElement是App的方法，它需要访问的是App的state，所以你根本不应该把它绑定到ItemList的this上——这是逻辑方向错了。

2. App组件未初始化state，且addElement逻辑错误 #

你在addElement里试图访问this.state.ItemList，但App的constructor里完全没初始化这个state，运行时会直接报错。另外，state里应该存储数据（比如字符串数组），而不是直接存React元素（<Item value={data} />），渲染逻辑应该放在render里处理。

3. 传递方法时未正确绑定this到App #

在App的render里传递adder={this.addElement}时，这个方法的this默认是undefined（React严格模式下），所以当你调用它时，this.state会找不到，直接报错。

修正后的完整代码 #

import React from 'react';
import {render} from 'react-dom';

class Item extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <div> {this.props.value} </div>;
  }
}

class ItemList extends React.Component {
  constructor(props) {
    super(props);
    // 这里不需要绑定adder，因为adder应该绑定到App的this
  }

  render() {
    const items = this.props.items.map(el=> <Item key={el} value={el} />);
    return (
      <div>
        <h2> To Do List </h2>
        <ul>{items}</ul>
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    // 初始化App的state，存储待办事项数据
    this.state = {
      todoItems: ['Work', 'Learn React']
    }
    // 在这里绑定addElement的this到App实例
    this.addElement = this.addElement.bind(this);
  }

  addElement(data) {
    if (!data.trim()) return; // 空输入不处理
    // 不要直接修改state，用setState创建新数组
    this.setState(prevState => ({
      todoItems: [...prevState.todoItems, data]
    }));
  }

  render() {
    return (
      <div>
        <input type="text" ref={input=>this.input=input} />
        <input type="button" value="Add" onClick={()=>{
          this.addElement(this.input.value);
          this.input.value = ''; // 添加后清空输入框
        }}/>
        {/* 把App的todoItems传给ItemList，状态提升更易维护 */}
        <ItemList items={this.state.todoItems} />
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

关键修正点说明 #

• 状态提升：把待办事项的状态放到App组件里管理，ItemList只负责接收数据并渲染，这是React里处理父子组件状态共享的最佳实践。
• 正确绑定this：在App的constructor里给addElement绑定this，确保调用时this指向App实例，能访问到this.state。
• state操作规范：用setState修改状态，并且通过展开运算符创建新数组（不要直接用push修改原数组，因为React依赖state的不可变性来检测更新）。
• 数据而非元素存在state：state里只存字符串数据，渲染时由ItemList生成<Item>元素。

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