将事件传递给React中的儿童组成部分

Question

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

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

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

，但是我得到了一个带有"无法读取属性'handleremove'dundefined'的typeError"。我想知道为什么在地图功能中{this}不确定？

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

什么都没有改变。this是否还不能在.map()内定义吗？

Answer 1

您需要将this作为第二个参数

如果向映射提供了thisarg参数，则将其用作 回调为此值。否则，该值未定义将用作 它的价值。这个值最终可通过回调可观察到 根据确定这一点的通常规则确定 通过功能。

在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箭头功能自动保留当前this上下文：

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