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

虽然你想要的是技术上可行的，但这是一个更明确易懂的方法。

我重新考虑了你的代码，以便数据流只向一个方向发展，从App到'Itemimport React from＆＃34; react＆＃34 ;; 从＆＃34; react-dom＆＃34;;

导入{render}

我还将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

Answer 2

它是否应该指向ItemsList组件，因为它是使用bind（）绑定到它的？

嗯，你跟随的步骤不正确。

在App组件

中

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

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

在ItemList组件中，

您需要在安装bindChild组件时调用ItemList方法。

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

现在，在App（父级）组件中，您可以参考ItemList属性中的 this.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

上的完整示例

无法在React

2 个答案: