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