封装的子组件，才fromitem中，子组件的变化，如何被form监听到。

子组件，应该有个onChange事件。

1.问题：在嵌入自定义组件<Form><MyComponent></Form>时，需要将子组件的onChange方法暴露出去。

2.原因：

1.form会监听<input>的onChange方法和value变量（form是<input>的一个属性）
2.其它基于<input>封装的组件如：select，自定义的方法名必须叫onChange，变量名必须叫value，否则自定义组件的状态变化不能被form表单的onChange捕获

————————————————
版权声明：本文为CSDN博主「赵自煜」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zhaoshidaye666/article/details/115961559

3.相关问题

https://qa.1r1g.com/sf/ask/2022129931/

4.react父子传值

当不使用类时，可以使用函数和props来在React的父子组件之间传递数据。以下是一个简单的例子：

//父组件
import React from 'react';  
import ChildComponent from './ChildComponent';  
  
function ParentComponent() {  
  const [data, setData] = React.useState('父组件数据');  
  
  return (  
    <div>  
      <ChildComponent content={data} setData={setData} />  
    </div>  
  );  
}  
  
export default ParentComponent;

//****子组件
import React from 'react';  
  
function ChildComponent({ content, setData }) {  
  return (  
    <div>  
      {content}  
      <button onClick={() => setData('新的数据')}>更新数据</button>  
    </div>  
  );  
}  
  
export default ChildComponent;

5.其实，这是使用组件的时候，要把sql变化的信息，同步给form表单

<Form.Item
            label="触发条件"
            name="dataWarningRulesDto"
            rules={[{ required: true, message: '请输入' }]}
          >
            <SqlBuildItem fields={fields}  form={form} onChange={value=>{
              console.log('触发条件的变化',value)
            }}/>
          </Form.Item>

6.子组件，通过props.xxx 去触发父组件的xxx函数

7.form中封装的子组件，如何回显数据

<Form.Item
              name="messageReceiver"
              valuePropName="checked"
              label="邮件接收人"
              rules={[{ required: true, message: '请选择' }]}
            >
              <DebounceSelect
                mode="multiple"
                value={userEmails}
                placeholder="搜索名称关键字"
                fetchOptions={fetchUserList}
                onChange={newValue => {
                  console.log('最新邮箱', newValue);
                  setUserEmails(newValue);
                }}
                style={{
                  width: '100%',
                }}
              />
            </Form.Item>