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>
)
}
}
react redio
最新推荐文章于 2024-09-14 18:52:56 发布