Question

我目前正在使用关于React的this教程，并且我遇到了两个组件之间的事件问题。

这是第一个：

class TodoComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: ['item 1', 'item 2', 'item 3', 'item 4']
    }
  }

  onDelete(item) {
    const updatedTodos = this.state.todos.filter((val, index) => {
      return item !== val;
    });
    this.setState({
      todos: updatedTodos
    });
  }

  render() {
    let todos = this.state.todos;
    todos = todos.map((item, index) => {
      return (
        <TodoItem item={item} key={index} onDelete={this.onDelete}/>
      );
    });

    return (
      <div id="todo-list">
        <p>The busiest people have the most leisure...</p>
        <ul>{todos}</ul>
      </div>
    );
  }
}

第二个：

class TodoItem extends React.Component {
  handleDelete() {
    this.props.onDelete(this.props.item);
  }

  render() {
    return (
      <li>
        <div className="todo-item">
          <span className="item-name">{this.props.item}</span>
          <span className="item-delete" onClick={this.handleDelete}> x </span>
        </div>
      </li>
    );
  }
}

我收到此错误：

TypeError：这是未定义的

bundle.js：10896：7

来自webpack bundle的那一行引用了第二个模块中的以下方法......

handleDelete() {
  this.props.onDelete(this.props.item);
}

很抱歉，如果这最终成为一个简单的解决方案，那么第一天就是React for me。

Answer 1

如果在React中有事件处理程序，则必须确保将describe "POST create" do context 'valid request' do it 'should increase @list item' do expect { post :create }.to change(List, :count).by(1) end it "returns HTTP status" do post :create expect(response).to have_http_status :success #200 end end context 'invalid request' do it "return HTTP status - reports BAD REQUEST (HTTP status 400)" do get :create expect(response.status).to eq 400 end end end的正确值绑定到这些处理程序。

有各种方法可以做到这一点，但一种简单而常见的方法是将处理程序包裹在箭头功能周围，这样可以保留this的预期值。处理程序：

this

背后的原因是事件处理程序被称为异步，并且在该上下文中未定义// TodoItem <span className="item-delete" onClick={() => this.handleDelete()}> x </span> // TodoComponent <TodoItem item={item} key={index} onDelete={(item) => this.onDelete(item)}/>的值，除非您采取额外的预防措施以确保this指向预期值。

进一步阅读（MDN）：this（参见讨论箭头功能的部分）

修改：我使用您的代码创建了这个JSFiddle，其中包含一个工作示例。

在反应组件之间传递道具

1 个答案: