其他分享
首页 > 其他分享> > 5. react 组件拆分 和 组件传值

5. react 组件拆分 和 组件传值

作者:互联网

1.将 todoList 进行拆分

  创建 编写TodoList.js

import React, { Component , Fragment } from 'react';
import TodoItem from './TodoItem';
class TodoList extends Component
{
constructor( props ){
super(props);
this.state = { inputValue: '', list: [] }
}
render(){
return (
<Fragment>
<input type='text' value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
<button onClick={this.addClick.bind(this)}>提交</button>
<ul>
{
this.state.list.map((value, index)=>{
                    // 传入 list 数组内的 value index 和 定义的删除方法 bind(this) 如果子类调用的话 该方法是不存在的
return (
<TodoItem value={value} index={index} itemDelete={this.itemDelete.bind(this)}/>
);
})
}
</ul>
</Fragment>
);
}
inputChange(e){
this.setState( {inputValue: e.target.value} );
}
addClick(){
this.setState({
list : [...this.state.list, this.state.inputValue],
inputValue: ''
})
}
itemDelete(index){
const list = [...this.state.list];
list.splice(index, 1);
this.setState({list:list});
}
}
export default TodoList

    

创建 编写TodoItem.js

  #TodoItem.js

import React , { Component } from 'react';
class TodoItem extends Component{
constructor(props){
super(props);
}
render() {
      // 使用 .props 表示 传递过来的参数
return (
<div onClick={this.delete.bind(this)}>{this.props.value}</div>
);
}
delete(){
     // 调用 组件传递过来的方法
this.props.itemDelete(this.props.index);
}
}
export default TodoItem;

 

标签:index,TodoItem,Component,list,react,state,props,组件,传值
来源: https://www.cnblogs.com/zonehoo/p/11613886.html