效果:
代码结构:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App2 from './App2';
ReactDOM.render(<App2 />, document.getElementById('root'));
Todo2.js
import React from 'react';
export default class Todo2 extends React.Component {
constructor(props) {
super(props);
}
deleteThis(){
let {deleteUl,index}=this.props;
if(window.confirm("确认删除?")){
deleteUl(index);
}
}
editThis(){
let{editUl,index}=this.props;
editUl(index);
}
render() {
return (
<React.Fragment>
<div>
<ul className="list">
<li>
{this.props.content_name}
</li>
<li>--</li>
<li>
{this.props.content_post}
</li>
<li>
<button onClick={this.editThis.bind(this)}>编辑</button>
</li>
<li>
<button onClick={this.deleteThis.bind(this)} >删除</button>
</li>
</ul>
</div>
</React.Fragment>
);
}
}
App2.js
import React from 'react';
import Todo2 from './Todo2';
export default class App2 extends React.Component {
constructor(props) {
super(props);
this.state={
input_name:'',
input_post:'',
list:[
{"name":"张三","post":"校长"},
{"name":"王五","post":"主任"}
],
editStatus:-1,
}
}
deleteUl(e,index){
let list=this.state.list;
list.splice(index,1);
this.setState({
list:list
});
}
editUl(index,e){
let list=this.state.list;
this.setState({
input_name:list[index].name,
input_post:list[index].post
})
this.state.editStatus=index;
}
input_name_change(e){
this.setState({
input_name:e.target.value
})
}
input_post_change(e){
this.setState({
input_post:e.target.value
})
}
addUser(e){
let user={"name":this.state.input_name,"post":this.state.input_post};
let list=this.state.list;
if(this.state.input_name.length!=0 && this.state.input_post.length!=0){
console.log(this.state.input_name);
if(this.state.editStatus!=-1){
list[this.state.editStatus].name=this.state.input_name;
list[this.state.editStatus].post=this.state.input_post;
}else{
list.push(user);
}
this.setState({
list:list,
input_name:'',
input_post:''
})
}else{
alert("姓名和职务不能为空");
}
}
render() {
return (
<div className="App2">
<div className="form">
姓名:<input value={this.state.input_name} onChange={this.input_name_change.bind(this)}/>
<br />
职务:<input value={this.state.input_post} onChange={this.input_post_change.bind(this)}/>
<br />
<button onClick={this.addUser.bind(this)} >添加</button>
</div>
<div className="content">
<ul>
{
this.state.list.map((item,index)=>{
return(
<Todo2
key={index}
content_name={item['name']}
content_post={item['post']}
index={index}
deleteUl={this.deleteUl.bind(this)}
editUl={this.editUl.bind(this)}
/>
)
})
}
</ul>
</div>
</div>
);
}
}
index.css
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.content .list li{
float: left;
list-style: none;
width: 200px;
height: 40px;
line-height: 40px;
}
.content .list li button{
display: inline-block;
border: 0px;
background-color: #029AE5;
color: white;
width: 80px;
height: 40px;
}
.content .list {
overflow: hidden;
cursor: pointer;
background-color: #DF6464;
}
其中事件绑定this可以写在构造其中,
this.input_name_change=this.input_name_change.bind(this);
react渲染时最外层需要用div标签包起来,如果不想显示那层div,在外层加上一个<React.Fragment>标签即可。