请问怎么用react实现添加一行的功能,实在不会写,没思路

clipboard.png

想点击一个按钮的时候再新增加一个table

阅读 7.4k
3 个回答

可以通过一个 Number 来对 table 进行计数,然后通过 setState 更新。
查看:一个简单的 Demo

state上添加一个参数,根据参数判断是否展示table,点击按钮的时候修改这个state

render(){
    let {show} = this.state;
    return (
        <div>
            <button onClick={()=>{this.setState({show:true})}}>点击</button>
            {show && <table></table>}
        </div>
    )
}

React使用属性和状态来渲染UI模型。假设你的每行的数据具有name, job, telephone number, phone number, email五个字段。虚构一个数据模型,像这样:

[
    ['赵四','搬运工','76543210','13910733521','zs@xx.com'],
    ['马麦皮','演员','123456788','13910733520','mmp@xx.com'],
]

因为这个数据是会被修改的,所以把它作为状态,假设某个时刻状态是这样的:

this.state = {
    users: [
        ['赵四','搬运工','76543210','13910733521','zs@xx.com'],
        ['马麦皮','演员','123456788','13910733520','mmp@xx.com'],
    ]
}

要添加一行,只需要向数组内添加数据即可,这时候要注意[数据不可变性]:(https://facebook.github.io/re...

addDate (data) {
    this.setState({
        users: this.state.users.slice(0).push(data)
    })
}

修改后的数据可能是这样的:

this.state = {
    users: [
        ['赵四','搬运工','76543210','13910733521','zs@xx.com'],
        ['马麦皮','演员','123456788','13910733520','mmp@xx.com'],
        ['董瓜丕','管道工','66666666','13733333333','xgp@xx.com']
    ]
}

把数据结构在render中渲染出来即可。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题