react + antd 项目常用操作汇总(更新中)

最新推荐文章于 2024-05-03 21:46:35 发布

原创最新推荐文章于 2024-05-03 21:46:35 发布 · 763 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#antd #react #操作 #取值

前端开发专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍如何使用Ant Design的表格、输入框、级联选择器、选择器和单选按钮组等组件，包括如何在表格中实现链接跳转、携带参数的操作、获取组件的onChange事件值等实用技巧。

表格内访问地址

const columns = [
  {
    title: '访问地址',
    render: (text, record) => <a target="_blank" href={record.guid}>{record.guid}</a>,
  },
];

// 这里的record从数据中取得

JS逻辑跳转路由页面

const { history } = this.props;
history.push(`/form/TableForm/?id=${this.state.XXXX}`)

// 就这么一点哈哈哈就很真实
// 如果有路由传参一定不要忘记写了

表格内操作`查看`(携带参数)

const columns = [
  {
    title: '操作',
    render: (record) => (
      <span>
        <Link to={`/form/TableForm?id=${record.id}`}>查看</Link>
      </span>
    ),
  },
];

// 这里的record内容从数据中取得

Input获取onChange值

import { Input } from 'antd';


// 文章标题
function onchange(e){
  console.log(e.target.value);
}


<Input placeholder="输入文章标题" onChange={onchange}/>

Cascader级联选择器取onChange值

import { Cascader } from 'antd';


// 级联选择
function cateChange(value) {
  console.log(value)
}


<Cascader options={handled_dataCate} onChange={cateChange} />

// 这里的options要从数据流中获取,格式是数组例: [1,2,3]

Select选择器取onChange值

import { Select } from 'antd';

const Option = Select.Option;



// Select选择
function statusChange(value) {
  console.log(value);
}


<Select defaultValue="0" onChange={statusChange}>
    <Option value="0">第一个</Option>
    <Option value="1">第二个</Option>
    <Option value="2">第三个</Option>
</Select>


// 不要忘了const option组(不影响使用但是控制台会有报错)

RadioGroup选择组(支持单选)

import { Button, Radio } from 'antd';

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;


// 选择器
function commentChange(e) {
  console.log(e.target.value);
}

<RadioGroup onChange={commentChange} defaultValue={true} buttonStyle="solid">
    <RadioButton value={true}>第一种情况</RadioButton>
    <RadioButton value={false}>第二种情况</RadioButton>
</RadioGroup>


// 这里的value当然可以是""的字符串，例子写成Boolean是当做单选用了