[英]Callback Function With Parameters ReactJS
Working with ReactJS and having trouble understanding how callback functions
work with ReactJS. 使用ReactJS并且无法理解callback functions
如何与ReactJS一起使用。
I have a parent component titled TodoFormComponent
, which initializes my list of todo items. 我有一个标题为TodoFormComponent
的父组件,它初始化我的待办事项列表。 I've created a callback function on the TodoItemsComonent
, but it doesn't trigger the updateItem
method and display the selected
item. 我在TodoItemsComonent
上创建了一个回调函数,但它不会触发updateItem
方法并显示所selected
。
Question: How can I pass data from the child to the parent? 问题:如何将数据从孩子传递给父母? I want to pass the selected todo item to the parent so that I can update the master todo list. 我想将选定的待办事项传递给父项,以便我可以更新主待办事项列表。
Parent Component (TodoFormComponent) 父组件(TodoFormComponent)
The TodoFormComponent
has selectedTask
, which should be triggering the updateItem
method. TodoFormComponent
有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>
)
}
}
Child Component (TodoItemsComponent) 子组件(TodoItemsComponent)
The TodoItemsComponent
has an onClick
to update the selected value. TodoItemsComponent
有一个onClick
来更新选定的值。 This gets updated in the selectedTask
function. 这会在selectedTask
函数中更新。 import * as React from "react"; import * as React from“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>
)
}
}
Whenever you want to pass data from child to parent you pass a function as a prop to child and from child you call that function using this.props.passedFunction(yourDataToPassToParent)
每当你想要将数据从子节点传递给父节点时,你将一个函数作为prop传递给子节点,并从子this.props.passedFunction(yourDataToPassToParent)
使用this.props.passedFunction(yourDataToPassToParent)
调用该函数。
Here from your parent component you are passing the selectedTask
function as prop, so you should call this.prop.selectedTask()
with the data to be passed to parent like: 在您的父组件中,您将selectedTask
函数作为prop传递,因此您应该使用要传递给父类的数据调用this.prop.selectedTask()
,如:
<button
type="button"
className="btn btn-xs btn-danger"
onClick={() => {this.props.selectedTask(item)}}
>
X
</button>
Also the way you are passing the selectedTask
in your parent is wrong. 你在父母中传递selectedTask
的方式也是错误的。 You should pass it like this: 你应该像这样传递它:
<TodoItemsComponent items={this.state.todoItems} selectedTask={this.updateItem}/>
In your TodoItemsComponent,updateItem() is passed as prop. 在您的TodoItemsComponent中,updateItem()作为prop传递。 So you need to call the this.props.updateItem()
in your onClick method. 所以你需要在你的onClick方法中调用this.props.updateItem()
。
So your button should be: 所以你的按钮应该是:
<button
type="button"
className="btn btn-xs btn-danger"
onClick={() =>
{this.props.selectedTask(item)}}>X
</button>
and Update your parent components UpdateItem method to receive properties as item. 并更新您的父组件UpdateItem方法以接收属性作为项目。 Like this: 像这样:
updateItem (e) {
console.log('Selected Value:: ', e);
}
And to pass method in children you need to 并且需要通过孩子的方法
<TodoItemsComponent items=
{this.state.todoItems} selectedTask={this.updateItem}/>
If you do this: {()=>this.updateItem()}
then it will initialize the method. 如果你这样做: {()=>this.updateItem()}
那么它将初始化方法。 So you need just pass the function reference. 所以你需要传递函数参考。
You have to send updateItem as a prop to the child Component. 您必须将updateItem作为prop发送到子Component。
const Parent = () =>
<div>
<TodoItemsComponent items={this.state.todoItems} selectedTask={updateItem}/>
</div>
Also update 还要更新
updateItem (item) {
this.setState({ selected: item })
console.log( 'Selected Value:: ', item);
}
Some pseudo-code: 一些伪代码:
class Parent extends React.Component {
render() {
return (<Child id={1} onClick={(id) => console.log(id)}/>);
}
}
class Child extends React.Component {
render() {
return (<div onClick={() => this.props.onClick(this.props.id)}></div>);
}
}
Console.log will output "1" Console.log将输出“1”
class TodoItemsComponent extends React.Component { constructor(props) { super(props); } 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.props.selectedTask(item); }} > X </button> </div> </li> ); })} </ul> ); } } 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(item) { this.setState({ selected: item }); } render() { return ( <div className="row"> <div className="container"> <div className="well col-xs-6 col-xs-offset-3"> <h1>To do: </h1> <h3> Selected task: {JSON.stringify(this.state.selected)} </h3> <div name="todo-items"> <TodoItemsComponent items={this.state.todoItems} selectedTask={this.updateItem} /> </div> <div name="add-todo-item" /> </div> </div> </div> ); } } const App = () => <TodoFormComponent />; ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>
playground: https://codesandbox.io/s/LgrGKK9og playground: https : //codesandbox.io/s/LgrGKK9og
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.