Question

我用ts编写了这个React组件，它渲染了另一个组件它以item和OnItemRender作为道具。当AnotherComponent渲染每个项目时，它将调用itemrender。这工作正常，我正在为每个项目显示文本框。现在，我为每个文本框附加了onChange Eventhandler。但是在文本框上进行任何更改时，我都会收到控制台错误。 this未定义。

由于我正在使用箭头函数，因此我认为this应该正确地绑定到词法范围。我什至尝试添加this.handleChange = this.handleChange.bind(this)，但错误仍然相同。我在做什么错了？

class MyNewList extends React.Component<any, any> {

  public render(){
    return (
      <AnotherComponent  items = {this.state.items } onItemRender = {this.itemRender}
    )
  }

  public itemRender(item,column){
    return (
        <input type="text" value={this.state.value} 
         onChange= {(event) => this.handleChange(event,item)} />
    )
  }

  public handleChange(event,item){

  }
}

Answer 1

无需绑定handleChange方法，因为您是在itemRender方法内部调用它的，但是您确实需要绑定itemRender方法。

尝试

class MyNewList extends React.Component<any, any> {

    public render(){
        return (
        <AnotherComponent  items = {this.state.items } onItemRender = {this.itemRender.bind(this)}
        )
    }

    public itemRender(item,column){
        return (
            <input type="text" value={this.state.value} 
            onChange= {(event) => this.handleChange(event,item)} />
        )
    }

    public handleChange(event,item){

    }
}

Answer 2

尝试:)应该可以。

class MyNewList extends React.Component<any, any> {

  public render(){
    return (
      <AnotherComponent  items = {this.state.items } 
      onItemRender = {
        (event) => this.itemRender(
          event, this.state.item, this.state.column)
      }
    )
  }

  public itemRender(event, item, column){
    return (
        <input type="text" value={this.state.value} 
         onChange= {this.handleChange(event, item, column)} />
    )
  }

  public handleChange(event, item, column){

  }
}

Answer 3

我相信itemRender是失去范围的那个。尝试绑定itemRender方法而不是handleChange方法。

Answer 4

这就是我的方法-依赖于这样的DOM属性：

 class MyNewList extends React.Component<any, any> {
     public constructor(props) {
         super(props);
         this.handleChange = this.handleChange.bind(this);
     }

     public render() {
         return (
             <AnotherComponent
                 items={this.state.items}
                 onItemRender={this.itemRender} />
         )
     }

     public itemRender(item, column) {
         return (
             <input
                 type="text" value={this.state.value}
                 name={item.name}
                 onChange={this.handleChange} />
         )
     }

     public handleChange(e){
         const name = e.target.name;
         console.log(name, 'changed');
     }
 }

反应回调未定义

4 个答案: