你这文档都没看完，就写代码了，差评。
A
B
C
D
这个才是RadioGroup的用法,丛植RadioGroup的value值就可以了。
然后不得不说，代码写的比较丑，但是给的例子可以直接跑起来，这点不错。
丑指的这里
if (userName) {
if (userName.a) {
for (let i = 0; i < userName.a.length; i++) {
if (userName.a[i] === getUserName) {
userNames = '100%造假';
}
}
}
if (userName.b) {
for (let j = 0; j < userName.b.length; j++) {
if (userName.b[j] === getUserName) {
userNames = '大概率';
}
}
}
if (userName.c) {
for (let k = 0; k < userName.c.length; k++) {
if (userName.c[k] === getUserName) {
userNames = '小概率';
}
}
}
}
稍微修改了一下
import React, { Component, PropTypes } from 'react';
import { Tabs, DatePicker, Radio, Table, Select } from 'antd';
const RadioGroup = Radio.Group;
const getUserName = "张三";
const map = {
a: 0,
b: 1,
c: 2,
default: 9999
}
class Radios extends Component {
constructor(props) {
super(props);
this.state = {};
}
componentWillMount() {
this.initRequest();
}
initRequest = () => {
let data = [{
key: 1,
RQ: '0805',
CODE: '55199106.RQ',
STATE: '{"a":[],"b":[],"c":[]}',
}, {
key: 2,
RQ: '0505',
CODE: '55199106.RQ',
STATE: '{"a":[],"b":["张三"],"c":[]}',
}, {
key: 3,
RQ: '0115',
CODE: '55199106.RQ',
STATE: '{"a":["张三"],"b":[],"c":[]}',
}];
this.setState({ initData: data });
}
requestData = () => {
let data = [{
key: 1,
RQ: '0805',
CODE: '55199106.RQ',
STATE: '{"a":[""],"b":[],"c":["张三"]}',
}, {
key: 2,
RQ: '0505',
CODE: '55199106.RQ',
STATE: '{"b":[],"a":[],"c":[]}',
}, {
key: 3,
RQ: '0805',
CODE: '55199106.RQ',
STATE: '{"a":[""],"b":[""],"c":["张三"]}',
}];
this.setState({ initData: data });
}
render() {
const data = this.state.initData;
let { sortedInfo, filteredInfo } = this.state;
sortedInfo = sortedInfo || {};
filteredInfo = filteredInfo || {};
const columns = [
{
title: '日期',
dataIndex: 'RQ',
key: 'RQ',
width: 120,
filteredValue: filteredInfo.RQ || null,
onFilter: (value, record) => record.RQ.includes(value),
sorter: (a, b) => a.RQ.length - b.RQ.length,
sortOrder: sortedInfo.columnKey === 'RQ' && sortedInfo.order,
}, {
title: '代码',
dataIndex: 'CODE',
key: 'CODE',
width: 168,
sorter: (a, b) => a.CODE - b.CODE,
sortOrder: sortedInfo.columnKey === 'CODE' && sortedInfo.order,
}, {
title: '投票',
width: 1165,
render: (text, data, index) => {
// 解析数据
let userName = text.STATE ? JSON.parse(text.STATE) : '', userNames = '';
// 设置默认显示值
let value = map.default;
// 获取选中value，可以提成方法
for (let variable in userName) {
if (userName[variable].some((item) => item === getUserName )) {
value = map[variable];
break;
}
}
return (
100%造假
大概率
小概率
);
},
}];
return (
请求新数据
);
}
RadioGroup = (e) => {
console.log(e.target.value);
}
}
export default Radios;
===补充内容==
那个本来应该你自己来实现的，只是指出问题。
import React, { Component, PropTypes } from 'react';
import { Tabs, DatePicker, Radio, Table, Select } from 'antd';
const RadioGroup = Radio.Group;
const getUserName = "张三";
const map = {
a: 'a',
b: 'b',
c: 'c',
}
class Radios extends Component {
constructor(props) {
super(props);
this.state = {};
}
componentWillMount() {
this.initRequest();
}
getStateFromoData (data) {
const { STATE } = data;
return data.map((item) => {
const parseState = JSON.parse(item.STATE) || {};
item.STATE = "";
for(let key in parseState) {
if(parseState[key].some((item) => {return item === getUserName})) {
item.STATE = key;
}
}
return item;
})
}
initRequest = () => {
let data = [{
key: 1,
RQ: '0805',
CODE: '55199106.RQ',
STATE: '{"a":[],"b":[],"c":[]}',
}, {
key: 2,
RQ: '0505',
CODE: '55199106.RQ',
STATE: '{"a":[],"b":["张三"],"c":[]}',
}, {
key: 3,
RQ: '0115',
CODE: '55199106.RQ',
STATE: '{"a":["张三"],"b":[],"c":[]}',
}];
this.setState({ initData: this.getStateFromoData(data) });
}
requestData = () => {
let data = [{
key: 1,
RQ: '0805',
CODE: '55199106.RQ',
STATE: '{"a":[""],"b":[],"c":["张三"]}',
}, {
key: 2,
RQ: '0505',
CODE: '55199106.RQ',
STATE: '{"b":[],"a":[],"c":[]}',
}, {
key: 3,
RQ: '0805',
CODE: '55199106.RQ',
STATE: '{"a":[""],"b":[""],"c":["张三"]}',
}];
this.setState({ initData: this.getStateFromoData(data) });
}
render() {
const data = this.state.initData;
let { sortedInfo, filteredInfo } = this.state;
sortedInfo = sortedInfo || {};
filteredInfo = filteredInfo || {};
const columns = [
{
title: '日期',
dataIndex: 'RQ',
key: 'RQ',
width: 120,
filteredValue: filteredInfo.RQ || null,
onFilter: (value, record) => record.RQ.includes(value),
sorter: (a, b) => a.RQ.length - b.RQ.length,
sortOrder: sortedInfo.columnKey === 'RQ' && sortedInfo.order,
}, {
title: '代码',
dataIndex: 'CODE',
key: 'CODE',
width: 168,
sorter: (a, b) => a.CODE - b.CODE,
sortOrder: sortedInfo.columnKey === 'CODE' && sortedInfo.order,
}, {
title: '投票',
width: 1165,
key: 'VOTE',
render: (text, data, index) => {
return (
100%造假
大概率
小概率
);
},
}];
return (
请求新数据
);
}
RadioGroup = (index) => {
return (e) => {
// 拷贝数据
const copyData = this.state.initData.slice(0)
// 修改数据
copyData[index].STATE = e.target.value;
// 更新状态
this.setState({
initData: copyData
})
}
}
}
export default Radios;
看完好好思考下你之前的代码结构，其实很有问题
如果觉得《antd radio设置默认选中_antd单选框Radio问题》对你有帮助，请点赞、收藏，并留下你的观点哦！
