React中使用class组件做antd中的排版操作--编辑

码小白的求学之路

于 2021-04-15 18:23:12 发布

阅读量525

点赞数

文章标签： reactjs

本文链接：https://blog.youkuaiyun.com/yanxiaona111/article/details/115733304

版权

本文介绍如何在React的class组件中利用Ant Design进行页面布局的编辑操作，通过实例展示了编辑前后的效果对比。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React, { PureComponent} from 'react';
import { Typography } from 'antd';
import { HighlightOutlined } from '@ant-design/icons';

const { Paragraph } = Typography;
export default class Right extends PureComponent {
	constructor(props){
		super(props);
			this.state={
				customIconStr:"编辑前的初始值",
			}
	 };
	 
  setCustomIconStr=(value)=>{
  	//其实它返回的是value,不是event
    this.setState({customIconStr:value})  //重新编辑后的值
  }
  
	render(){
		const {customIconStr} =this.state;
		return(
			<Paragraph
        editable={{
          icon: <HighlightOutlined />,
          tooltip: '编辑',
          onChange: this.setCustomIconStr,
        }}
      >
        {customIconStr}
      </Paragraph>
		)
	}


}