react组件间传值

//-----------------------------父组件TodoList中的内容：

import React ,{Component,Fragment} from 'react';

import TodoItem from './TodoItem';

class TodoList extends Component{

constructor(props){

super(props);

this.state={

inputValue:'',

list:['11','22','33']

}

}

render(){

return (

<Fragment>

<input onChange={this.handleChange.bind(this)}/><button onClick={this.handleBtnClick.bind(this)}>提交</button>

<ul>

{this.state.list.map((item,index)=>{

return (

<TodoItem

key={index}

deleteItem={this.handleClickDelete.bind(this)}

content={item}

index={index}

/>

)

})}

</ul>

</Fragment>

)

}

handleChange(e){//输入框监听事件

this.setState({

inputValue:e.target.value

})

}

handleBtnClick(){//提交增加列表项点击事件

this.setState({

list:[...this.state.list,this.state.inputValue]

})

}

handleClickDelete(index){//点击列表项 删除对应项

var list=[...this.state.list];

list.splice(index,1);

this.setState({

list:list

})

}

}

export default TodoList;

//-----------------------------子组件TodoItem组件中的内容：

import React,{Component} from 'react';

class TodoItem extends Component{

render(){

return (

<li onClick={this.handleClick.bind(this)}>{this.props.content}</li>

)

}

handleClick(){//在todoItem中定义删除点击事件，调用父组件的方法删除父组件上的数据

this.props.deleteItem(this.props.index)

}

}

export default TodoItem;

转载于:https://www.cnblogs.com/laidans/p/11148893.html