在实际业务使用中,经常遇到Form.item下不止一个input控件,可能有多个控件组成,这时候直接获取使用useForm获取控件值就没有效果了。
解决方案有两种,
第一种:Form.item下嵌套Form.item,然后获取值
第二种:自定义控件,然后获取自定义控件的值
废话不多说直接上代码:
import { Input, Radio, DatePicker, Form, Button } from 'antd';
import {useState,useEffect} from 'react';
const ValueView = (props) => {
const [value, setValue] = useState({radioValue:'b'});
//使用useEffect避免首次获取值为undefined
useEffect(() => {
props.onChange(value);
}, []);
const dateSelectChange = (e) => {
let radioValue = e.target.value;
setValue({ ...value, radioValue });
props.onChange(value);
}
function onChange(date) {
setValue({ ...value, date });
props.onChange(value);
}
function inputChange(inputValue) {
setValue({ ...value, inputValue });
props.onChange(value);
}
return (<>
<Input onChange={inputChange} />
<Radio.Group
defaultValue='b'
onChange={(e) => dateSelectChange(e)}>
<Radio.Button value="a">近一周</Radio.Button>
<Radio.Button value="b">近一月</Radio.Button>
<Radio.Button value="c">近三月</Radio.Button>
</Radio.Group>
<DatePicker
onChange={onChange}
style={{ marginLeft: 12 }}>
</DatePicker>
</>);
}
const Demo = () => {
const [form] = Form.useForm();
function getValue() {
const values = form.getFieldValue('getValue');
console.log(values);
}
return (<><Form form={form}>
<Form.Item name='getValue' label='自定义控件'>
<ValueView />
</Form.Item>
</Form>
<Button onClick={() => getValue()}>
获取自定义控件value
</Button>
</>);
}
export default Demo;
关键点在于props.onChange, 这个地方就是传值的关键处。
网友评论