我们将list 拆分为一个子组件。
在src 下新建一个文件 TodoItem.js 。初始化一下,如下。
import React, {
Component
} from 'react'
class TodoItem extends Component {
render() {
return (
<div>todo item</div>
)
}
}
export default TodoItem
然后,我们在TodoList.js 中引入并使用。如下。
import React, {
Component
} from 'react';
import TodoItem from './TodoItem';
class TodoList extends Component {
constructor(props) {
super(props);
this.state = {
list: [],
inputValue: ''
}
}
handleBtnClick() {
this.setState({
list: [...this.state.list, this.state.inputValue],
inputValue: ''
})
}
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 value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
<button onClick={this.handleBtnClick.bind(this)}>add</button>
</div>
<ul>
{
this.state.list.map((item,index) => {
return <TodoItem />
// return <li key={index} onClick={this.handleItemClick.bind(this,index)}>{item}</li>
})
}
</ul>
</div>
);
}
}
export default TodoList;
下面我们要从TodoList.js 中向组件TodoItem 中传值,即内容。该过程是父组件往子组件中传值,可以通过属性进行传递,如下。
先TodoList 组件
import React, {
Component
} from 'react';
import TodoItem from './TodoItem';
class TodoList extends Component {
constructor(props) {
super(props);
this.state = {
list: [],
inputValue: ''
}
}
handleBtnClick() {
this.setState({
list: [...this.state.list, this.state.inputValue],
inputValue: ''
})
}
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 value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
<button onClick={this.handleBtnClick.bind(this)}>add</button>
</div>
<ul>
{
this.state.list.map((item,index) => {
return <TodoItem key={index} content={item} />
// return <li key={index} onClick={this.handleItemClick.bind(this,index)}>{item}</li>
})
}
</ul>
</div>
);
}
}
export default TodoList;
然后子组件 TodoItem
import React, {
Component
} from 'react'
class TodoItem extends Component {
render() {
return (
<div>{this.props.content}</div>
)
}
}
export default TodoItem
现在我们实现了添加item,然后呢我们去实现删除item。
我们首先在父组件中进行一些修改,往子组件中,传递一个index 属性,如下。
import React, {
Component
} from 'react';
import TodoItem from './TodoItem';
class TodoList extends Component {
constructor(props) {
super(props);
this.state = {
list: [],
inputValue: ''
}
}
handleBtnClick() {
this.setState({
list: [...this.state.list, this.state.inputValue],
inputValue: ''
})
}
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 value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
<button onClick={this.handleBtnClick.bind(this)}>add</button>
</div>
<ul>
{
this.state.list.map((item,index) => {
return <TodoItem key={index} content={item} index={index}/>
})
}
</ul>
</div>
);
}
}
export default TodoList;
然后在子组件中,有一个点击事件,并获取这个index值,并告诉父组件点击的index(因为要在父组件中删除这个index 在数组中)。子组件如下。
import React, {
Component
} from 'react'
class TodoItem extends Component {
handleDelete() {
this.props.delete(this.props.index)
}
render() {
return (
<div onClick={this.handleDelete.bind(this)}>{this.props.content}</div>
)
}
}
export default TodoItem
子组件向父组件传值,是通过父组件传过来的函数属性。上面代码中this.props.delete 就是父组件传递过来的一个函数属性。下面是父组件的代码。
import React, {
Component
} from 'react';
import TodoItem from './TodoItem';
class TodoList extends Component {
constructor(props) {
super(props);
this.state = {
list: [],
inputValue: ''
}
}
handleBtnClick() {
this.setState({
list: [...this.state.list, this.state.inputValue],
inputValue: ''
})
}
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 value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
<button onClick={this.handleBtnClick.bind(this)}>add</button>
</div>
<ul>
{
this.state.list.map((item,index) => {
return <TodoItem delete={this.handleDelete.bind(this)} key={index} content={item} index={index}/>
})
}
</ul>
</div>
);
}
}
export default TodoList;
Done!
扫描二维码关注公众号,回复:
4808320 查看本文章