【备战春招】第3天 React组件与通信

**课程名称：** React16.4 快速上手

**课程章节：第3章 React组件与通信

课程讲师： Dell

课程内容：
1、拆分组件TodoItem

import React from 'react'
class TodoItem extends React.Component {
	render(){
		return (
			<div> {this.props.content}</div>
		)
	}
}
export default TodoItem

2、在主组件TodoList中引用子组件TodoItem ,父组件通过属性的形式向子组件传递参数，子组件通过props接受父组件传递过来的参数

import React from 'react'
import TodoItem from './TodoItem'
class TodoList extends React.Component {
	constructor(props){
		super(props);
		this.state = {
			list:[
				'learn react',
				'learn english'
			],
			inputValue:''
		}
	}
	handleBthClick(){
		this.setState({
			list:[...this.state.list,this.state.inputValue],
			inputValue:''
		})
		this.state.list.push('hello world')
	}
	handleInputChange(e){]
		this.setState({
			inputValue:e.target.value
		})
	}
	handleItemClick(index){
		const list = [...this.state.list]
		list.splice(index,1)
		this.setState({
			list:list
		})
		
	}
	render(){
		return (
			<div>
				<div>
					<input onClick={this.handleInputChange.bind(this)} />
					<button onClick={this.handleBthClick.bind(this)}>add </button>
				</div>
				<ul>
					{
·						this.state.list.map((item,index) => {
							return <TodoItem content={item} key={index} index={index}/>
						})
					}
					
				</ul>
			</div>
		)
	}
}

3、子组件向父组件传值,子组件如果想和父组件通信，子组件要调用父组件传递过来的方法
子组件

import React from 'react'
class TodoItem extends React.Component {
	handleDelete(){
		this.props.Delete(this.props.index)
	}
	render(){
		return (
			<div onClick={this.handleDelete.bind(this)}> {this.props.content}</div>
		)
	}
}
export default TodoItem

父组件

import React from 'react'
import TodoItem from './TodoItem'
class TodoList extends React.Component {
	constructor(props){
		super(props);
		this.state = {
			list:[
				'learn react',
				'learn english'
			],
			inputValue:''
		}
		this.handleInputChange = this.handleInputChange.bind(this)
		this.handleBthClick = this.handleBthClick.bind(this)
		this.handleDelete = this.handleDelete.bind(this)
	}
	handleBthClick(){
		this.setState({
			list:[...this.state.list,this.state.inputValue],
			inputValue:''
		})
		this.state.list.push('hello world')
	}
	handleInputChange(e){]
		this.setState({
			inputValue:e.target.value
		})
	}
	
	handleDelete(index){
		const list = [...this.state.list]
		list.splice(index,1)
		this.setState({
			list:list
		})
	}
	render(){
		return (
			<div>
				<div>
					<input onClick={this.handleInputChange} />
					<button onClick={this.handleBthClick}>add </button>
				</div>
				<ul>
					{
·						this.state.list.map((item,index) => {
							return <TodoItem Delete={this.handleDelete} content={item} key={index} index={index}/>
						})
					}
					
				</ul>
			</div>
		)
	}
}

4、代码优化
子组件

import React from 'react'
class TodoItem extends React.Component {
constructor(props){
super(props)
	this.handleDelete = this.handleDelete.bind(this)
}
	handleDelete(){
		this.props.Delete(this.props.index)
	}
	render(){
	const {content} = this.props
		return (
			<div onClick={this.handleDelete}> {content}</div>
		)
	}
}
export default TodoItem

父组件

import React from 'react'
import TodoItem from './TodoItem'
class TodoList extends React.Component {
	constructor(props){
		super(props);
		this.state = {
			list:[
				'learn react',
				'learn english'
			],
			inputValue:''
		}
	}
	handleBthClick(){
		this.setState({
			list:[...this.state.list,this.state.inputValue],
			inputValue:''
		})
		this.state.list.push('hello world')
	}
	handleInputChange(e){]
		this.setState({
			inputValue:e.target.value
		})
	}
	
	handleDelete(index){
		const list = [...this.state.list]
		list.splice(index,1)
		this.setState({
			list:list
		})
	}
	getTodoItems(){
		return(
			this.state.list.map((item,index) => {
							return <TodoItem Delete={this.handleDelete.bind(this)} content={item} key={index} index={index}/>
						})
		)
	}
	render(){
		return (
			<div>
				<div>
					<input onClick={this.handleInputChange.bind(this)} />
					<button onClick={this.handleBthClick.bind(this)}>add </button>
				</div>
				<ul>
					{
·						this.getTodoItems()
					}
					
				</ul>
			</div>
		)
	}
}

课程收获：
这节课学习到了组件间的通信，首先父组件通过属性给子组件传值，子组件向父组件传值，需要调用父组件的方法才可以进行传值，优化this指向，在constructor中直接添加函数的bind绑定,代码过长可以直接提取出来，然后直接在代码处直接执行，