1.点击按钮提交,新增对象
buttonChange() {
this.setState({
//展开运算符...this.state.list,生成一个全新的数组
// list:[...this.state.list,this.state.inputValue]
//后面是新加入的数组,两个组成一个新的数组
list:[...this.state.list,this.state.inputValue],
inputValue:''
})
}
2.删除
buttonDelete(index) { const list=[...this.state.list]; //删除方法splice,两个参数,第一个是索引,第2个是删除几个 list.splice(index,1); this.setState({ list:list }) }
3.记得使用方法要绑定this,改变this 的作用域
this.handleChange = this.handleChange.bind(this);
this.buttonChange = this.buttonChange.bind(this);
代码:
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state={
inputValue:'hello world',
list:[]
}
//改变this 的作用域
this.handleChange = this.handleChange.bind(this);
this.buttonChange = this.buttonChange.bind(this);
}
render() {
return (
<div>
<div>
<input type="text"
value={this.state.inputValue}
onChange={this.handleChange}
/>
<button onClick={this.buttonChange}>提交</button>
</div>
<ul>
{
this.state.list.map((item,index)=>{
return (
<li
key={index}
onClick={this.buttonDelete.bind(this,index)}
>
{item}
</li>
)
})
}
</ul>
</div>
);
}
handleChange(e) {
this.setState({
inputValue:e.target.value
})
}
buttonChange() {
this.setState({
//展开运算符...this.state.list,生成一个全新的数组
// list:[...this.state.list,this.state.inputValue]
//后面是新加入的数组,两个组成一个新的数组
list:[...this.state.list,this.state.inputValue],
inputValue:''
})
}
buttonDelete(index) {
const list=[...this.state.list];
//删除方法splice,两个参数,第一个是索引,第2个是删除几个
list.splice(index,1);
this.setState({
list:list
})
}
}
export default App;
演示: