1.8react 留言板 value数据需要用 onchange+setstate

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import React from 'react'
import ReactDom from 'react-dom'
class App extends React.Component {
state = {
iptname: "",
ipttxt: "",
list: [
{ id: 1, name: '泡泡', content: "我好喜欢会跳舞的男生" }
]
}
add = () => {
this.setState({
list: this.state.list.concat({
id: this.state.list.length + 1,
name: this.state.iptname,
content: this.state.ipttxt
})//concat
})//set
}
remove = (id, index) => {
let list = [...this.state.list]
list.splice(index, 1)
this.setState({
list
})//set
}
change = (id, index) => {
let list = [...this.state.list]
list[index].content = prompt("请输入你要修改的数值");
this.setState({
list
})//set
}
changeipt=(ev)=>{
this.setState({
[ev.target.name]:ev.target.value
})
}
render() {
return (
<div>
<h1>留言板</h1>
<label>用户名</label>
<input type="text" name="iptname" value={this.state.iptname} onChange={this.changeipt}/>
<br />
<label>留言内容</label>
<input type="text" name="ipttxt" value={this.state.ipttxt} onChange={this.changeipt}/>
<br />
<input type="submit" value="提交" onClick={this.add} />
<ul>
{
this.state.list.map((item, index) => {
return <li key={item.id}>
<span>{item.name}：
</span>
<span>{item.content}</span>
<input type="button" value="修改" onClick={this.change.bind(null,item.id,index)}/>
<input type="button" value="删除" onClick={()=>this.remove(item.id,index)}/>
</li>
})
}
</ul>
</div>
)
}
}
ReactDom.render(
<App />, document.getElementById('root')
)