antd單選框Radio問題

你的table沒設(shè)置rowKey

你這文檔都沒看完，就寫代碼了，差評(píng)。

<RadioGroup onChange={this.onChange} value={this.state.value}>
        <Radio value={1}>A</Radio>
        <Radio value={2}>B</Radio>
        <Radio value={3}>C</Radio>
        <Radio value={4}>D</Radio>
      </RadioGroup>

這個(gè)才是RadioGroup的用法,叢植RadioGroup的value值就可以了。

然后不得不說，代碼寫的比較丑，但是給的例子可以直接跑起來，這點(diǎn)不錯(cuò)。
丑指的這里

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: '20180805',
            CODE: '55199106.RQ',
            STATE: '{"a":[],"b":[],"c":[]}',
        }, {
            key: 2,
            RQ: '20180505',
            CODE: '55199106.RQ',
            STATE: '{"a":[],"b":["張三"],"c":[]}',
        }, {
            key: 3,
            RQ: '20180115',
            CODE: '55199106.RQ',
            STATE: '{"a":["張三"],"b":[],"c":[]}',
        }];
        this.setState({ initData: data });
    }
    requestData = () => {
        let data = [{
            key: 1,
            RQ: '20180805',
            CODE: '55199106.RQ',
            STATE: '{"a":[""],"b":[],"c":["張三"]}',
        }, {
            key: 2,
            RQ: '20180505',
            CODE: '55199106.RQ',
            STATE: '{"b":[],"a":[],"c":[]}',
        }, {
            key: 3,
            RQ: '20180805',
            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) => {
                    
                    // 解析數(shù)據(jù)
                    let userName = text.STATE ? JSON.parse(text.STATE) : '', userNames = '';

                    // 設(shè)置默認(rèn)顯示值
                    let value = map.default;
                    // 獲取選中value，可以提成方法
                    for (let variable in userName) {
                        if (userName[variable].some((item) => item === getUserName )) {
                            value = map[variable];
                            break;
                        }
                    }

                    return (
                        <div>
                            <RadioGroup value={value} onChange={this.RadioGroup}>
                                <Radio  value={map.a}>100%造假</Radio>
                                <Radio  value={map.b}>大概率</Radio>
                                <Radio  value={map.c}>小概率</Radio>
                            </RadioGroup>
                        </div>
                    );
                },
            }];
        return (
            <div>
                <button onClick={this.requestData}>請(qǐng)求新數(shù)據(jù)</button>
                <Table scroll={{ x: true, y: 500 }} pagination={{ showQuickJumper: true, pageSize: 100 }} columns={columns} dataSource={data} onChange={this.handleChange} />
            </div>
        );
    }

    RadioGroup = (e) => {
        console.log(e.target.value);
    }
}
export default Radios;

===補(bǔ)充內(nèi)容==
那個(gè)本來應(yīng)該你自己來實(shí)現(xiàn)的，只是指出問題。

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: '20180805',
            CODE: '55199106.RQ',
            STATE: '{"a":[],"b":[],"c":[]}',
        }, {
            key: 2,
            RQ: '20180505',
            CODE: '55199106.RQ',
            STATE: '{"a":[],"b":["張三"],"c":[]}',
        }, {
            key: 3,
            RQ: '20180115',
            CODE: '55199106.RQ',
            STATE: '{"a":["張三"],"b":[],"c":[]}',
        }];
        this.setState({ initData: this.getStateFromoData(data) });
    }

    requestData = () => {
        let data = [{
            key: 1,
            RQ: '20180805',
            CODE: '55199106.RQ',
            STATE: '{"a":[""],"b":[],"c":["張三"]}',
        }, {
            key: 2,
            RQ: '20180505',
            CODE: '55199106.RQ',
            STATE: '{"b":[],"a":[],"c":[]}',
        }, {
            key: 3,
            RQ: '20180805',
            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 (
                        <div>
                            <RadioGroup value={text.STATE} onChange={this.RadioGroup(index)}>
                                <Radio  value={map.a}>100%造假</Radio>
                                <Radio  value={map.b}>大概率</Radio>
                                <Radio  value={map.c}>小概率</Radio>
                            </RadioGroup>
                        </div>
                    );
                },
            }];
        return (
            <div>
                <button onClick={this.requestData}>請(qǐng)求新數(shù)據(jù)</button>
                <Table scroll={{ x: true, y: 500 }} pagination={{ showQuickJumper: true, pageSize: 100 }} columns={columns} dataSource={data} onChange={this.handleChange} />
            </div>
        );
    }

    RadioGroup = (index) => {
        return (e) => {
            // 拷貝數(shù)據(jù)
            const copyData = this.state.initData.slice(0)
            // 修改數(shù)據(jù)
            copyData[index].STATE = e.target.value;
            // 更新狀態(tài)
            this.setState({
                initData: copyData
            })
        }
    }
}
export default Radios;

看完好好思考下你之前的代碼結(jié)構(gòu)，其實(shí)很有問題

目測(cè)好像是key的問題。