无法在 React 中绑定处理程序

Question

我正在尝试将父组件的方法绑定到其子组件的状态，但我无法获得所需的结果。我检查了 App 组件中“this”的值，它仍然指向 App 组件。它不应该指向 ItemsList 组件，因为它是使用 bind() 绑定到它的吗？有人可以指出我正在犯的错误。

import React from 'react';
import {render} from 'react-dom';

class Item extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div> {this.props.value} </div>;
  }
}

class ItemList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      itemArray: ['Work', 'Learn React']
    }
    this.props.adder.bind(this);
    console.log(this.props.adder)
  }

  render() {
    const items = this.state.itemArray.map(el=><Item key={el} value={el} />);
    return (
      <div> 
        <h2> To Do List </h2>
        <ul>{items}</ul>
      </div>
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  addElement (data) {
    let items = this.state.ItemList;
    items.push(<Item value={data} />);

  }

  render() {
    return (
      <div>
        <input type="text" ref={input=>this.input=input} />
        <input type="button" value="Add" onClick={()=>this.addElement(this.input.value)}/>
        <ItemList adder={this.addElement} />
      </div>
    );
  }
}


render(<App />, document.getElementById('root'));

Answer 1

它不应该指向 ItemsList 组件，因为它是使用 bind() 绑定到它的吗？

嗯，你的步骤不对。

在App 组件中

您需要将ItemList（子）组件引用存储在 App(parent) 组件中。

<ItemList adder={this.addElement} bindChild =  {(ref)=>this.itemList = ref}/>

在ItemList组件中，

ItemList 组件挂载时需要调用bindChild 方法。

componentDidMount(){
  this.props.bindChild(this);
}

现在，在您的 App（父）组件中，您在 this.itemList 属性中具有 ItemList（子）组件的引用。

在App 组件中，您可以使用this.itemList 来更新ItemList（子）组件的状态。

addElement(data) {
    let items = this.itemList.state.itemArray;
    console.log(items);
    const newItem = <Item value={data} />

    this.itemList.setState({ itemArray : [...items, newItem]})
  }

请查看codesandbox上的完整示例

Answer 2

虽然您想要的在技术上是可行的，但这是一种更明确且易于理解的方法。

我重构了你的代码，使数据流只向一个方向流动，从App 到 `Itemimport React from "react"; 从“react-dom”导入{渲染}；

我还将Item 和ItemList 更改为分别以value 和items 作为道具的无状态组件。

主要变化是App持有状态，而不是ItemList

const Item = ({ value }) => <div>{value}</div>;

const ItemList = ({ items }) => (
  <div>
    <h2>To Do List</h2>
    {items.map(item => <Item key={item} value={item} />)}
  </div>
);

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      items: ["Work", "Learn React"]
    };
  }
  addElement(value) {
    this.setState(state => ({
      items: [...state.items, value]
    }));
  }
  render() {
    return (
      <div>
        <input type="text" ref={input => (this.input = input)} />
        <input
          type="button"
          value="Add"
          onClick={() => this.addElement(this.input.value)}
        />
        <ItemList items={this.state.items} />
      </div>
    );
  }
}

render(<App />, document.querySelector("#root"));

这是一个包含您的工作应用程序的 CodeSandbox：https://codesandbox.io/s/4r4v0w5o94