javascript React -“Forward”事件

deikduxw 于 2023-06-04 发布在 Java

关注(0)|答案(5)|浏览(99)

我有多个输入字段。当输入某个内容时，我想从所有输入字段调用相同的函数。为了知道事件是从哪个控件触发的，我创建了以下代码。这工作正常，但实际上，我想转发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呢？

JavaScript

来源：https://stackoverflow.com/questions/48420026/react-forward-event

5条答案

按热度按时间

l3zydbqr1#

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

赞(0）回复(0）举报 2023-06-04

0tdrvxhp2#

您正在构造函数this.handleIdKeyUp = this.onFiltersKeyUpHandler.bind（this，event，'Id'）中绑定事件和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。

赞(0）回复(0）举报 2023-06-04

2sbarzqh3#

我将提供另一种方法来做到这一点。您也可以部分应用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" />
      )
   }
}

赞(0）回复(0）举报 2023-06-04

ggazkfy84#

编辑

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

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>
    )
  }
}

赞(0）回复(0）举报 2023-06-04

euoag5mw5#

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

这应该能解决问题

赞(0）回复(0）举报 2023-06-04

我来回答

javascript React -“Forward”事件

5条答案

编辑

相关问题

热门标签

最新问答