React事件转发问题：多输入框共享函数如何获取event.target.value

嘿，我来帮你搞定这个问题！你的代码里有两个关键问题导致拿不到event.target.value：

问题根源 #

1. 构造函数里绑定onFiltersKeyUpHandler时，直接传了event变量——但这时候事件根本还没触发，event是undefined，等于你提前绑定了一个无效参数。
2. 你在render里又给handleIdKeyUp和handleCompanyKeyUp调用了.bind(this)，这会重新创建绑定函数，打乱了原来的参数顺序，最终导致处理函数里拿到的不是实际的事件对象。

几种可行的修复方案 #

方案1：用箭头函数直接传递参数（最直观）

在render里的onKeyUp事件中，用箭头函数把事件对象和自定义参数一起传给处理函数：

class FreightList extends Component {
  constructor(props) {
    super(props);
    this.state = { filters: [] };
    // 这里不需要提前绑定了，直接在render里处理
  }

  onFiltersKeyUpHandler(event, filterName) {
    // 现在能正常拿到event.target.value了！
    const inputValue = event.target.value;
    console.log(`当前输入的是${filterName}：${inputValue}`);
    // 你的其他逻辑
  }

  render() {
    return (
      <>
        <input
          type="text"
          ref="filtersId"
          onKeyUp={(e) => this.onFiltersKeyUpHandler(e, 'Id')}
          className="form-control minWidth50px"
        />
        <input
          type="text"
          ref="filtersCompany"
          onKeyUp={(e) => this.onFiltersKeyUpHandler(e, 'Company')}
          className="form-control minWidth50px"
        />
      </>
    );
  }
}

优点：写法直观，容易理解；缺点：每次渲染都会创建新的箭头函数，对于复杂组件可能有轻微性能影响（一般简单组件可以忽略）。

方案2：在render里用bind调整参数顺序

如果偏好使用bind，可以把自定义参数放在前面绑定，React会自动把事件对象追加到参数列表末尾：

class FreightList extends Component {
  constructor(props) {
    super(props);
    this.state = { filters: [] };
    // 提前绑定处理函数的上下文，避免重复创建
    this.onFiltersKeyUpHandler = this.onFiltersKeyUpHandler.bind(this);
  }

  // 注意参数顺序：自定义参数在前，事件对象在后
  onFiltersKeyUpHandler(filterName, event) {
    const inputValue = event.target.value;
    console.log(`当前输入的是${filterName}：${inputValue}`);
  }

  render() {
    return (
      <>
        <input
          type="text"
          ref="filtersId"
          onKeyUp={this.onFiltersKeyUpHandler.bind(this, 'Id')}
          className="form-control minWidth50px"
        />
        <input
          type="text"
          ref="filtersCompany"
          onKeyUp={this.onFiltersKeyUpHandler.bind(this, 'Company')}
          className="form-control minWidth50px"
        />
      </>
    );
  }
}

优点：提前绑定了上下文，比方案1少创建一些函数；缺点：render里的bind还是会每次创建新函数，追求极致性能的话可以看方案3。

方案3：用柯里化提前生成绑定函数（性能最优）

在构造函数里用柯里化生成带自定义参数的处理函数，这样每次渲染不会重复创建新函数：

class FreightList extends Component {
  constructor(props) {
    super(props);
    this.state = { filters: [] };
    // 提前生成绑定好参数的处理函数
    this.handleIdKeyUp = this.createFilterKeyUpHandler('Id');
    this.handleCompanyKeyUp = this.createFilterKeyUpHandler('Company');
  }

  // 柯里化函数，返回一个接收事件对象的处理函数
  createFilterKeyUpHandler(filterName) {
    return (event) => {
      const inputValue = event.target.value;
      console.log(`当前输入的是${filterName}：${inputValue}`);
      // 你的其他逻辑
    };
  }

  render() {
    return (
      <>
        <input
          type="text"
          ref="filtersId"
          onKeyUp={this.handleIdKeyUp}
          className="form-control minWidth50px"
        />
        <input
          type="text"
          ref="filtersCompany"
          onKeyUp={this.handleCompanyKeyUp}
          className="form-control minWidth50px"
        />
      </>
    );
  }
}

优点：只在组件初始化时创建一次处理函数，性能最好；缺点：需要额外写一个柯里化的生成函数，稍微复杂一点。

额外提醒：关于React事件池 #

如果你的处理逻辑里有异步操作（比如setTimeout），直接用event可能会因为React的事件池回收机制导致event.target变成null，这时候需要调用event.persist()来保留事件对象：

onFiltersKeyUpHandler(event, filterName) {
  event.persist(); // 保留事件对象
  setTimeout(() => {
    console.log(event.target.value); // 异步也能拿到值了
  }, 1000);
}

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