修改

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

修改

看到每个人都实现了相同的组件后，让我们正确地执行： - ）

class FreightList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      filters: []
    };
    // reason to bind it in the constructor and not in the render function, is that it will otherwise be re-bound every render call. 
    // This means that every component using the function will have to re-render, since the props changed (the function reference changes)
    this.onFiltersKeyUpHandler = this.onFiltersKeyUpHandler.bind(this);
  }
  onFiltersKeyUpHandler (event) {
    const target = event.target;
    const filterName = target.name;
    // ... handle stuff
  }

  render() {
    return (
      <div>
        <input type="text" name="Id" onKeyUp={this.onFiltersKeyupHandler} className="form-control minWidth50px" />
        <input type="text" name="Company" onKeyUp={this.onFiltersKeyupHandler} className="form-control minWidth50px" />
      </div>
    )
  }
}

Answer 2

你在构造函数中绑定事件和id this.handleIdKeyUp = this.onFiltersKeyUpHandler.bind（this，event，'Id'）;所以在那个时候，它将是无效的。你打电话时需要传递它

class FreightList extends Component {

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

  onFiltersKeyUpHandler(event, filterName) {
    console.log(event.target.value, filterName)
  }

  render() {
    return (
      <div>
        <input type="text" onKeyUp={(e) => this.onFiltersKeyUpHandler(e, 'ID')} className="form-control minWidth50px" />
        <input type="text" onKeyUp={(e) => this.onFiltersKeyUpHandler(e, 'Company')} className="form-control minWidth50px" />
        </div>
        )
  }
}

这更简单，你甚至不需要refs。

Answer 3

您不必将方法绑定到构造函数中的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>
        )
    }
}

Answer 4

我会提供另一种方法来做到这一点。您还可以部分应用filterName：

class FreightList extends Component {

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

   onFiltersKeyUpHandler = filterName => event => {
     //do something
   }

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

Answer 5

<input type="text" ref="filtersId" onKeyUp={(event) => {this.handleIdKeyUp(this, event)}} className="form-control minWidth50px" />

这应该解决它。

反应 - “前进”事件

5 个答案:

修改