Javascript 无法在React中绑定处理程序

我试图将父组件的方法绑定到其子组件的状态，但无法获得所需的结果。我检查了应用程序组件中“this”的值，它仍然指向应用程序组件。它是否应该指向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'));

从“React”导入React；
从'react dom'导入{render}；
类项扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回{this.props.value}；
}
}
类ItemList扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
itemArray:['Work'，'Learn React']
}
this.props.adder.bind（this）；
console.log（this.props.adder）
}
render（）{
const items=this.state.itemArray.map（el=>）；
返回(
待办事项清单
{items}
);
}
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
}
附录（数据）{
让items=this.state.ItemList；
items.push（）；
}
render（）{
返回(
this.input=input}/>
this.addElement（this.input.value）}/>
);
}
}
render（，document.getElementById（'root'））；

虽然您想要的在技术上是可能的，但这是一种更明确、更容易理解的方法

我重新分解了您的代码，使数据流只流向一个方向，从

App

到`itemport React from“React”； 从“react dom”导入{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"));

const Item=（{value}）=>{value}；
常量项列表=（{items}）=>(
待办事项清单
{items.map（item=>）}
);
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
项目：[“工作”、“学习和反应”]
};
}
加法（值）{
this.setState（state=>({
项目：[…state.items，value]
}));
}
render（）{
返回(
（this.input=input）}/>
this.addElement（this.input.value）}
/>
);
}
}
渲染（
虽然您想要的在技术上是可能的，但这是一种更明确、更容易理解的方式

我重新分解了您的代码，使数据流只流向一个方向，从
App
到`itemport React from“React”；
从“react dom”导入{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"));

const Item=（{value}）=>{value}；
常量项列表=（{items}）=>(
待办事项清单
{items.map（item=>）}
);
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
项目：[“工作”、“学习和反应”]
};
}
加法（值）{
this.setState（state=>({
项目：[…state.items，value]
}));
}
render（）{
返回(
（this.input=input）}/>
this.addElement（this.input.value）}
/>
);
}
}
渲染(

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

嗯，你走的那一步不对

在
应用程序中
组件

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

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

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

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

现在，在您的
应用程序（父）组件中，
此.ItemList
属性中有
项目列表（子）组件的参考

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

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

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

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

addElement（数据）{
让items=this.itemList.state.itemArray；
控制台日志（项目）；
常量newItem=
this.itemList.setState（{itemArray:[…items，newItem]}）
}

请检查上的完整示例

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

嗯，你走的那一步不对

在
应用程序中
组件

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

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

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

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

现在，在您的
应用程序（父）组件中，
此.ItemList
属性中有
项目列表（子）组件的参考

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

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

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

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

addElement（数据）{
让items=this.itemList.state.itemArray；
控制台日志（项目）；
常量newItem=
this.itemList.setState（{itemArray:[…items，newItem]}）
}

请检查
上的完整示例。是的。但我想这也行不通，因为我们无法改变道具，也无法将此绑定函数向上传播到父级。是否有其他方法可以在子级内部实现父级的绑定回调？我已重新分析了您的代码并编辑了我的答案。如果您需要，请告诉我你有什么问题吗？是的。但我想这也行不通，因为我们不能改变道具，也无法将此绑定函数向上传播到父函数。有没有其他方法可以在子函数中实现父函数的绑定回调？我已经重新分析了你的代码并编辑了我的答案。如果你有任何问题，请告诉我谢谢你帮我。我还想问一件事。我们应该去哪里