diff --git a/docs/examples/names.tsx b/docs/examples/names.tsx index 14e47cfa..ba51c4d5 100644 --- a/docs/examples/names.tsx +++ b/docs/examples/names.tsx @@ -1,6 +1,7 @@ -import Form, { Field } from 'rc-field-form'; +import Form, { Field, FieldContext } from 'rc-field-form'; import React from 'react'; import Input from './components/Input'; +import type { FieldProps } from '@/Field'; const RangeInput = ({ value = [], @@ -20,16 +21,50 @@ const RangeInput = ({ ); }; +export const MyField = ( + props: FieldProps & { names?: FieldProps>['name'][] }, +) => { + const fieldContext = React.useContext(FieldContext); + + const { names, getValueProps, getValueFromEvent, ...rest } = props; + const [firstNames, ...resetNames] = names; + return ( + <> + { + const values = names.map(name => fieldContext.getFieldValue(name)); + if (getValueProps) { + return getValueProps(values); + } + return { value: values }; + }} + getValueFromEvent={value => { + let values = value; + if (getValueFromEvent) { + values = getValueFromEvent(value); + } + names.forEach((name, index) => { + fieldContext.setFields([{ name, value: values[index] }]); + }); + return value[0]; + }} + {...rest} + /> + {resetNames.map(name => ( + + {() => undefined} + + ))} + + ); +}; + export default () => { const [form] = Form.useForm(); - // form.setFields([{ name: 'aa', value: 'aa' }]); return (
{ - // console.log(JSON.stringify(value, null, 2)); - // console.log('values', values); - // }} initialValues={{ start: '1', end: '2' }} onFinish={values => { console.log('values', values); @@ -38,19 +73,17 @@ export default () => { console.log('error', error); }} > - { - // console.log('11', value); - // return { value: value }; - // }} - // getValueFromEvent={value => { - // console.log('2', value); - // return value; - // }} + { + return { value: value }; + }} + getValueFromEvent={value => { + return value; + }} > - +
);