此demo,包含了以下知识点
1.React 元素渲染(以及css样式的不同的书写)
2.JSX
3.React 组件和props(父子组件传值,方法调用)
4.React State(状态)
5.React 事件处理
效果图:
目录介绍:
index.js
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import './style.css'
ReactDOM.render(<TodoList />, document.getElementById('root'));
TodoList.js
import React, { Component } from 'react';
import TodoItem from './TodoItem'
class TodoList extends Component {
constructor(props){
super(props);
this.state={
list:[],
inputValue:''
}
this.handleBtnClickAdd=this.handleBtnClickAdd.bind(this)
this.handleInputChange=this.handleInputChange.bind(this)
}
handleBtnClickAdd(){
this.setState({
list:[...this.state.list,this.state.inputValue],
inputValue:''
})
}
handleInputChange(e){
this.setState({inputValue:e.target.value})
}
handleDel(index){
console.log(index)
const list=[...this.state.list]
list.splice(index,1)
this.setState({
list:list
})
}
getHtmlTodoItem(){
return (
this.state.list.map((item,index)=>{
{/*contents={item} index={index}向子组件传值*/}
{/*delete={this.handleDel.bind(this,index) TodoItem子组件调用的TodoList父组件handleDel方法*/}
return (<TodoItem key={index} contents={item} index={index} delete={this.handleDel.bind(this,index)}></TodoItem>)
})
)
}
render(){
return (
// <React.Fragement>替换<div>。可以在控制台看到外层div就没了
<div>
<div>
<input className='input-color' value={this.state.inputValue} onChange={this.handleInputChange}/>
<button style={{marginLeft:"10px",background:'orange',color:'#fff',border:'1px solid orange',height:'34px',width:'50px'}} onClick={this.handleBtnClickAdd}>add</button>
</div>
<ul>
{
this.getHtmlTodoItem()
/*this.state.list.map((item,index)=>{
return (<TodoItem key={index} contents={item} index={index} delete={this.handleDel.bind(this,index)}></TodoItem>)
}) */
}
</ul>
</div>
)
}
}
export default TodoList;
TodoItem.js
import React from 'react';
class TodoItem extends React.Component {
constructor(props){
super(props);
this.handleBtnClickDel=this.handleBtnClickDel.bind(this)
}
handleBtnClickDel(){
console.log(this.props.index) /*父组件传过来的值*/
this.props.delete(this.props.index)/*调用父组件方法*/
}
render(){
return (
<div style={{width:'320px',height:"50px",lineHeight:"50px"}}>
{/*父组件传过来的值*/}
<span style={{display:"inline-block",width:'162px'}}>{this.props.contents}</span>
<button className="button-style" onClick={this.handleBtnClickDel}>del</button>
</div>
)
}
}
export default TodoItem;