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

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')
)

最后

以上就是仁爱唇膏为你收集整理的1.8react 留言板 value数据需要用 onchange+setstate的全部内容，希望文章能够帮你解决1.8react 留言板 value数据需要用 onchange+setstate所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。