在react项目中点击编辑按钮回填数据

最新推荐文章于 2023-06-08 16:09:05 发布

qiqi-fairy

最新推荐文章于 2023-06-08 16:09:05 发布

阅读量948

点赞数

分类专栏： React 记录篇富文本编辑器文章标签： javascript reactjs 前端

本文链接：https://blog.csdn.net/weixin_45778591/article/details/117228905

版权

本文记录了在React项目中实现点击编辑按钮时如何回填数据的步骤。首先，通过请求获取本行数据，然后在目标页面接收并处理数据，利用value属性绑定到页面组件。此外，还介绍了使用react-quill库处理富文本的情况。

摘要由CSDN通过智能技术生成

点击编辑按钮回填数据

因为是react项目，所以做得时候比较费劲，有结果了就记录一下，方便下次学习

点击编辑按钮拿到本行数据

<a onClick={() => {this.handlEditValue(record.id)}}>编辑</a>

方法中包含了请求后台数据的路径以及请求方式，返回的是本行的数据

// 点击编辑，跳转页面
    handlEditValue = (id) => {
        // console.log(id); // 本行id值
        axios.get('路径', {params: {id}}).then(res => {
            // console.log(res);
            if(res.data) {
                let detailsDataObj(state中的变量) = res.data.data  // 本行所有数据
                // console.log(detailsDataObj);
                detailsDataObj.id = id
                if(this.state.isModalValue){        // 如果是false 
                    this.setState({detailsDataObj}) // 则是详情
                }
                else { 
                	// 否则跳转页面
	                // 跳转页面的方式
	                // this.props.history.push("你的url后缀路径&