react radio

最新推荐文章于 2024-04-19 09:37:46 发布

cheeregoego

最新推荐文章于 2024-04-19 09:37:46 发布

阅读量110

点赞数

文章标签： javascript Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_44912278/article/details/129232161

版权

该文章展示了一个React组件的实现，使用antd库中的Form、Input、Select、Radio和Space等元素。代码中定义了一个Radio.Group，动态渲染optionsData数组，并在选中值改变时更新state。特别地，当选择4时，会显示一个Input字段。

摘要由CSDN通过智能技术生成

import React, { Component } from 'react'

import { Form, Input, Select, Button, Radio, Space } from 'antd';
import 'antd/dist/reset.css';

const { Option } = Select;

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};

const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};

const optionsData = [{ name: 1, value: '1' }, { name: 2, value: '2' }, { name: 3, value: '3' }, { name: 4, value: '4' }]

// const onChange = (e) => {
//     console.log('radio checked', e.target.value);
//     // setValue(e.target.value);
//     this.setState({ value: e.target.value })
// };



export default class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            optionsData: [],
            value: '1'
        }
    }

    onChange = (e) => {
        console.log('radio checked', e.target.value);
        this.setState({ value: e.target.value })
    };



    render() {
        return (
            <div>
                <Radio.Group onChange={this.onChange} value={this.state.value}>
                    <Space direction="vertical">
                        {
                            optionsData.map(item =>
                                item.value === '4' ? <Radio value={4}>
                                    More...
              {this.state.value === 4 ? (
                                        <Input
                                            style={{
                                                width: 100,
                                                marginLeft: 10,
                                            }}
                                        />
                                    ) : null}
                                </Radio> : <Radio value={item.value}>{item.name}</Radio>
                            )
                        }
                    </Space>
                </Radio.Group>
            </div>
        )
    }
}