Question

我是React的新手，这是一个非常noob的问题，但我不明白为什么这不起作用。

我正在尝试构建一个简单的待办事项列表。

我的TodoList.js组件如下所示：

import React, {Component} from 'react';
import TodoItem from './TodoItem';

    export default class TodoList extends Component{
      constructor(props){
        super(props);
        this.state = {
          todos:[
            {
              title:"todo1"
            },
            {
              title:"todo3"
            },
            {
              title:"todo2"
            }
          ]
        }

      }

      handleRemove(idx){
        alert('works');
      }

      render(){
        var todos = this.state.todos.map(function(t,idx){
          return(<TodoItem
                    remove={this.handleRemove.bind(this,idx)}
                    title={t.title}
          />)
        })

        return (
          <div>
            <h1>To do</h1>
          <div>{todos}</div>
          </div>
        )
      }
    }

我的子组件如下所示：

import React, {Component} from 'react';

    export default class TodoItem extends Component{
      render(){
        return (
          <div>{this.props.title}
            <button onClick={this.props.remove}>X</button>
          </div>
        )
      }
    }

但是我得到一个TypeError，其中包含“无法读取属性'handleRemove'的未定义”。我想知道为什么在地图函数{this}中未定义？

我试图将此this.handleRemove = this.handleRemove.bind(this)放入构造函数中。

没有改变任何事情。 this内是否也应该定义.map()？

Answer 1

您需要将this作为second argument

如果提供thisArg参数进行映射，则将其用作回调这个值。否则，undefined值将用作它的这个价值。最终可以通过回调观察到的这个值是根据通常的规则确定这一点通过功能。

on map：

render(){
        var todos = this.state.todos.map(function(t,idx){
          return(<TodoItem
                    remove={this.handleRemove.bind(this,idx)}
                    title={t.title}
          />)
        }, this)

        return (
          <div>
            <h1>To do</h1>
          <div>{todos}</div>
          </div>
        )
      }
    }

或者，您可以使用ES6 arrow function自动保留当前this上下文：

var todos = this.state.todos.map((t,idx) => {
  return(<TodoItem
    remove={this.handleRemove.bind(this,idx)}
    title={t.title}
  />)
})

将事件传递给React

1 个答案: