使用 ReactJS 并难以理解如何使用callback functions
使用 ReactJS。
我有一个名为的父组件TodoFormComponent
,它初始化我的待办事项列表。我已经创建了一个回调函数TodoItemsComonent
,但它不会触发updateItem
方法并显示selected
item.
问题:如何将数据从孩子传递给父母?我想将选定的待办事项传递给父级,以便我可以更新主待办事项列表。
父组件 (TodoFormComponent)
The TodoFormComponent
has selectedTask
,这应该会触发updateItem
方法。
import * as React from "react";
import TodoItemsComponent from "../todo-items/todo-items.component";
import AddTodoItemComponent from "../add-todo-item/add-todo-item.component";
export default class TodoFormComponent extends React.Component {
constructor(){
super();
this.state = {
todoItems: [
{ id: '1', todo: 'First Todo Item' },
{ id: '2', todo: 'Second Todo Item' },
{ id: '3', todo: 'Third Todo Item' }
],
selected: {}
};
this.updateItem = this.updateItem.bind(this);
}
updateItem () {
console.log('Selected Value:: ', this.state.selected);
}
render() {
return (
<div className="row">
<div className="container">
<div className="well col-xs-6 col-xs-offset-3">
<h1>To do: </h1>
<div name="todo-items">
<TodoItemsComponent items={this.state.todoItems} selectedTask={() => {this.updateItem}}/>
</div>
<div name="add-todo-item">
<AddTodoItemComponent/>
</div>
</div>
</div>
</div>
)
}
}
子组件 (TodoItemsComponent)
The TodoItemsComponent
has an onClick
更新选定的值。这会在以下位置更新selectedTask
功能。
从“react”导入* as React;
export default class TodoItemsComponent extends React.Component {
constructor(props) {
super(props);
}
selectedTask (item) {
this.setState({selected: item})
}
render() {
return (
<ul className="list-group">
{
this.props.items.map((item) => {
return (
<li className="list-group-item">
{item.todo}
<div className="pull-right">
<button
type="button"
className="btn btn-xs btn-success">
✓
</button> <button
type="button"
className="btn btn-xs btn-danger"
onClick={() => {this.selectedTask(item)}}
>X
</button>
</div>
</li>
)
})
}
</ul>
)
}
}