Javascript 如何在React中制作动态单选按钮？

我想基于API响应创建一个动态单选按钮，并将单击的值存储在状态中

以下是单选按钮的代码：

     <section className='radio-content-brand'>
          <span className='company-type-brand'>Campaign Type</span>
                {campaign_type.map(type => (
                    <div className='div-brand'>
                        <div className="size-box-brand">
                            <input
                                type="radio"
                                value={this.state.campaign}
                                checked={this.state.campaign === type.campaign_type}
                                onChange={this.handleChangeCompanyType}
                            />
                            <label className='label-brand'>
                                <span style={{ color: "#606060", fontSize: 25 }}>{type.campaign_type}</span>
                            </label>
                        </div>
                    </div>
                ))}
     </section>

这里有两种状态，我希望在其中存储单击的单选按钮值，以及在其中存储响应列表的活动类型

---

问题是单击单选按钮时没有响应，即

事件.目标.value

为空。

请检查此示例。希望对你有帮助

import React from "react";

export default class DynamicRadio extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            campaign: 'standard',
            checked: 1
        };
        this.campaign_types = [
            {id: 1, campaign_type: 'normal'},
            {id: 2, campaign_type: 'standard'},
            {id: 3, campaign_type: 'automated'},
        ];
    }

    handleChangeCompanyType = (event, index) => {
        console.log(this.campaign_types[index].campaign_type, 'campaign_type');
        let value = this.campaign_types[index].campaign_type;
        this.setState({campaign: value, checked: index})
    };

    render() {
        return (
            <div>
                <section className='radio-content-brand'>
                    <span className='company-type-brand'>Campaign Type</span>
                    {this.campaign_types.map((type, i) => (
                        <div className='div-brand'>
                            <div className="size-box-brand">
                                <input
                                    key={type.id}
                                    type="radio"
                                    value={this.state.campaign}
                                    checked={this.state.checked === i}
                                    onClick={(event) => this.handleChangeCompanyType(event, i)}
                                />
                                <label className='label-brand'>
                                    <span style={{color: "#606060", fontSize: 25}}>{type.campaign_type}</span>
                                </label>
                            </div>
                        </div>
                    ))}
                </section>
            </div>
        );
    }
}

从“React”导入React；
导出默认类DynamicRadio扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
运动:"标准",，
核对：1
};
此活动类型=[
{id:1，活动类型：'normal'}，
{id:2，活动类型：'standard'}，
{id:3，活动类型：'automated'}，
];
}
handleChangeCompanyType=（事件、索引）=>{
console.log（this.campaign_types[index].campaign_type，'campaign_type'）；
让value=this.campaign\u types[index].campaign\u type；
this.setState（{campaign:value，checked:index}）
};
render（）{
返回(
活动类型
{this.campaign_types.map（（type，i）=>(
this.handleChangeCompanyType（事件，i）}
/>
{type.campaign_type}
))}
);
}
}

this.state.campaign的初始值是什么？我没有设置初始值，它只是一个空字符串“”。这就是为什么

event.target.value

返回一个空字符串的原因。我应该如何更正它。

import React from "react";

export default class DynamicRadio extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            campaign: 'standard',
            checked: 1
        };
        this.campaign_types = [
            {id: 1, campaign_type: 'normal'},
            {id: 2, campaign_type: 'standard'},
            {id: 3, campaign_type: 'automated'},
        ];
    }

    handleChangeCompanyType = (event, index) => {
        console.log(this.campaign_types[index].campaign_type, 'campaign_type');
        let value = this.campaign_types[index].campaign_type;
        this.setState({campaign: value, checked: index})
    };

    render() {
        return (
            <div>
                <section className='radio-content-brand'>
                    <span className='company-type-brand'>Campaign Type</span>
                    {this.campaign_types.map((type, i) => (
                        <div className='div-brand'>
                            <div className="size-box-brand">
                                <input
                                    key={type.id}
                                    type="radio"
                                    value={this.state.campaign}
                                    checked={this.state.checked === i}
                                    onClick={(event) => this.handleChangeCompanyType(event, i)}
                                />
                                <label className='label-brand'>
                                    <span style={{color: "#606060", fontSize: 25}}>{type.campaign_type}</span>
                                </label>
                            </div>
                        </div>
                    ))}
                </section>
            </div>
        );
    }
}