Form.Item内自行封装组件,取值和赋值问题

143 阅读1分钟

Form.Item内的元素自动被传入value和onChange事件,在自行封装是只要获取到value和onChange进行控制就可以向Form.Item传入取值。

父组件部分

 <Form
 initialValues={{
 month: { test1: '1', test2: '1' },
 }}
 >
   <Form.Item
   label="每个月的"
   name="month"
   >
       <TestItem />
   </Form.Item>
 </Form>

子组件

const TestItem = (props) => {
  console.log('TestItem props', props);
  const { onChange, value } = props;
  const { weekOptions, monthOptions } = RepeatContent();

  const onMonthChange = (monthValue) => {
    onChange({ ...value, test1: monthValue });
  };
  const onMonthWeekChange = (_value) => {
    onChange({ ...value, test2: _value });
  };

  return (
    <div>
      <Select defaultValue="第一个" options={monthOptions} value={value.test1} onChange={onMonthChange} />&emsp;
      <Select defaultValue="星期一" options={weekOptions} value={value.test2} onChange={onMonthWeekChange} />
    </div>
  );
};

在Form.Item内不需要传任何东西,value和onChange直接被传入给了子组件

直接利用onChange进行传值就可以修改value