react.js父子组件通信
这里通过todolist的功能来说明
父组件:
import React,{ Component,Fragment } from 'react'; import TodoItem from './ToDoItem'; class TodoList extends Component { constructor(props) { super(props); this.state = { inputValue: '', todoList: [] }; this.handleSubmit = this.handleSubmit.bind(this); this.handleChangeInput = this.handleChangeInput.bind(this); this.handleDelete = this.handleDelete.bind(this); this.parentMethod = this.parentMethod.bind(this); this.testChildren = this.testChildren.bind(this); } render() { const { inputValue,todoList } = this.state; return ( <Fragment> <p><input value={inputValue} onChange={this.handleChangeInput} /><button onClick={this.handleSubmit} type="button">提交</button></p> <TodoItem ref="children" parentMethod = {this.parentMethod} /> <button onClick={this.testChildren}>测试调用子组件的方法</button> <ul> { todoList.map((item,index) => ( <li key={+new Date() + index} dangerouslySetInnerHTML={{__html:item}} onClick={() => this.handleDelete(index)}></li> )) } </ul> </Fragment> ) }; parentMethod() { alert("调动父组件方法"); } testChildren() { this.refs.children.childrenMethod(); } handleChangeInput(e) { this.setState({ inputValue: e.target.value },() => { console.log(this.state); }) } handleSubmit() { this.setState({ todoList: [...this.state.todoList,this.state.inputValue], inputValue: '', }) } handleDelete(index) { // immutable概念 // state不允许我们做任何的改变 let list = [...this.state.todoList]; //拷贝一份TodoList list.splice(index,1); this.setState({ todoList: list }) } } export default TodoList;
子组件
import React,{ Component } from 'react'; class TodoItem extends Component { constructor(props) { super(props); this.childrenMethod = this.childrenMethod.bind(this); } render() { return ( <div> <h3>子组件</h3> <button onClick={this.childrenMethod}>子组件方法</button> <button onClick={this.props.parentMethod}>父组件方法</button> </div> ) } childrenMethod() { alert("调用子组件方法"); } } export default TodoItem;
总结:
父组件给子组件传递数据:直接在调用子组件的地方传递数据即可。
调用子组件的方法:简单说就是给子组件,通过ref起个名字,然后在父组件的点击事件中,通过this.refs.子组件的名字.子组件的方法来实现
子组件调用父组件的方法。在调用子组件的地方将方法传递,子组件中通过this.props。父组件传递的方法即可
子组件给父组件传递数据:通过调用父组件的方法时,通过callback回调传递数据。this.props.父组件的方法(传递的数据)