1.父组件

import React, { Component, Fragment } from 'react';
import TodoItem from './TodoItem';

class TodoList extends Component {
	
	constructor(props) {
		super(props);
		this.state = {
			inputValue: 'hello world!!!!',
			list: []
		}
	}
	
	render() {
		return (
			<Fragment>
				<div>
					<label htmlFor="insertArea">输入内容</label>
					<input 
						id="insertArea"
						value={this.state.inputValue} 
						onChange={this.handleInputChange.bind(this)}
					/>
					<button onClick={this.handleBtnClick.bind(this)}>提交</button>
				</div>
				<ul>
					{
						this.state.list.map((item, index) => {
							return (
								<div>
									<TodoItem 
									content={item} 
									index={index}
									deleteItem={this.handleItemDelete.bind(this)}
									/>
								</div>
							)
						})
					}
				</ul>
			</Fragment>
		)
	}
	
	handleInputChange(e) {
		// console.log(e.target.value)
		this.setState({
			inputValue: e.target.value
		})
	}
	
	handleBtnClick(e) {
		this.setState({
			list: [...this.state.list, this.state.inputValue],
			inputValue: ''
		})
	}
	
	handleItemDelete(index) {
		console.log(index)
		// 拷贝一份，不要直接去修改state里面的数据
		const list = [...this.state.list];
		list.splice(index, 1)
		
		this.setState({
			list: list
		})
	}
}

export default TodoList;

2.子组件

import React, { Component } from 'react';

class TodoItem extends Component {
	constructor(props) {
	    super(props);
		this.handleClick = this.handleClick.bind(this);
	}
	
	render() {
		return (
		<div onClick={this.handleClick}>
		{this.props.content}
		</div>
		)
	}
	
	handleClick() {
		console.log(this.props.index)
		this.props.deleteItem(this.props.index)
	}
}

export default TodoItem;

优化以上代码

1.父组件

import React, { Component, Fragment } from 'react';
import TodoItem from './TodoItem';

class TodoList extends Component {
	
	constructor(props) {
		super(props);
		this.state = {
			inputValue: 'hello world!!!!',
			list: []
		};
		this.handleInputChange = this.handleInputChange.bind(this);
		this.handleBtnClick = this.handleBtnClick.bind(this);
		this.handleItemDelete = this.handleItemDelete.bind(this);
	}
	
	render() {
		return (
			<Fragment>
				<div>
					<label htmlFor="insertArea">输入内容</label>
					<input 
						id="insertArea"
						value={this.state.inputValue} 
						onChange={this.handleInputChange}
					/>
					<button onClick={this.handleBtnClick}>提交</button>
				</div>
				<ul>
					{this.getTodoItem()}
				</ul>
			</Fragment>
		)
	}
	
	getTodoItem() {
		return this.state.list.map((item, index) => {
			return (
					<TodoItem
					key={index}
					content={item} 
					index={index}
					deleteItem={this.handleItemDelete}
					/>
			)
		})
	}
	
	handleInputChange(e) {
		// 这里一定要放在外层
		const value = e.target.value;
		this.setState(() => ({
			inputValue: value
		}));
	}
	
	handleBtnClick(e) {
		this.setState((preState) => ({
			list: [...preState.list, preState.inputValue],
			inputValue: ''
		}));
	}
	
	handleItemDelete(index) {
		this.setState((preState)=> {
			// 拷贝一份，不要直接去修改state里面的数据
			const list = [...preState.list];
			list.splice(index, 1)
			return {list}
		});
	}
}

export default TodoList;

2.子组件

import React, { Component } from 'react';

class TodoItem extends Component {
	constructor(props) {
	    super(props);
		this.handleClick = this.handleClick.bind(this);
	}
	
	render() {
		const { content } = this.props;
		return (
		<div onClick={this.handleClick}>
		{content}
		</div>
		)
	}
	
	handleClick() {
		// console.log(this.props.index)
		const { deleteItem, index } = this.props;
		this.props.deleteItem(this.props.index)
	}
}

export default TodoItem;