javascript - react - "Forward"事件

Question

我有多个输入字段。当输入某些内容时，我想从所有输入字段调用相同的函数。为了了解事件是从哪个控件触发的，我创建了这段代码。这工作正常，但实际上，我想转发 event 以访问 event.target.value 属性。简而言之，这是我的组件:

class FreightList extends Component {

   constructor(props) {
       super(props);
       this.state = {
           filters : [],
       };
       this.handleIdKeyUp = this.onFiltersKeyUpHandler.bind(this, event, 'Id');
       this.handleCompanyKeyUp = this.onFiltersKeyUpHandler.bind(this, event, 'Company');
   }

   onFiltersKeyUpHandler(event,filterName) {
     //do something
   }

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

现在的问题是，在方法 onFiltersKeyUpHandler 中，event.target 属性为 null。我确定，这段代码

this.handleIdKeyUp = this.onFiltersKeyUpHandler.bind(this, event, 'Id');

对于“转发”event 参数无效，该参数应由 handleIdKeyUp 接收。那么如何将 event 参数转发到 onFiltersKeyUpHandler 来访问 event.target.value ？

Answer 1

您不必在构造函数中将该方法绑定(bind)到 this。相反，请使用如下箭头功能。此外，还可以在 onKeyUp 事件中使用箭头函数。

class FreightList extends Component {

    constructor(props) {
        super(props);
        this.state = {
            filters : [],
        };
    }

    onFiltersKeyUpHandler = (event, filterName) => {
        //do something
    }

    render() {
        return (
            <div>
             <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" />
            </div>
        )
    }
}