Reactjs 未定义的反应回调

我用ts编写了这个React组件，它呈现另一个组件 它将items和OnItemRender作为道具。当另一个组件呈现每个项目时，它调用itemrender。这很好，我正在为每个项目显示文本框。现在我为每个文本框都附加了一个onChange Eventhandler。 但对文本框的任何更改都会导致控制台错误<代码>此未定义

因为我使用的是箭头函数，所以我认为

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

  }
}

类MyNewList扩展了React.Component{ 公共渲染（）{ 返回( ) } 公共事务变更（事件、项目）{ } }

---

我认为itemRender正在失去作用域。尝试绑定itemRender方法而不是handleChange方法。

不需要绑定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){

    }
}

类MyNewList扩展了React.Component{ 公共渲染（）{ 返回( ) } 公共事务变更（事件、项目）{ } } 试试：）这应该行得通

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

  }
}

类MyNewList扩展了React.Component{ 公共渲染（）{ 返回( 这个.itemRender( 事件，this.state.item，this.state.column） } ) } 公共项呈现（事件、项、列）{ 返回( ) } 公共处理更改（事件、项目、列）{ } }

---

我就是这样做的——依赖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');
     }
 }

类MyNewList扩展了React.Component{ 公共构造函数（道具）{ 超级（道具）； this.handleChange=this.handleChange.bind（this）； } 公共渲染（）{ 返回( ) } 公共项呈现（项，列）{ 返回( ) } 公共交通更改（e）{ const name=e.target.name； log（名称“已更改”）； } }

---

是否绑定了

itemRender

方法？？如下所示：

this.itemRender=this.itemRender.bind（this）

？只有x，y参数，您正在向我们显示..参数。。。这可能会误导我们。显示实际代码的可读性。