React组件之间的传递在父组件的保存数据

Question

在子组件中编写了一个窗体进行输入数据的操作，在父组件中进行引用，然后进行数据保存的操作
这个组件是采用的树形组件,点击树形组件中的加号标签弹出这个子组件窗体输入数据，然后点击保存，把这些数据传递给父组件，在父组件中进行保存，把保存的数据以新建一个新的节点追加到这个加号标签下。

子组件
function FormComponets({ visible, onClose,onSave }){

    const [FormName, setFormName] = useState('');
    const [ObjectName, setObjectName] = useState('');
    const [form] = Form.useForm();//Form.useForm()生成了一个form实例，并将其绑定到了Form组件上
    const onFinish = (values,value,node) => {
        onSave(values, value, node); // 将表单数据、value和node传递给父组件进行保存
        // visible(false); // 关闭Modal
        form.setFieldsValue(values);
        form.resetFields(); //清空表单数据
      };

 return (
        <div>
          <Modal title="定义窗体信息" visible={visible}  onCancel={onClose} footer={null}>
            <Form form={form}
           onFinish={onFinish}
            >
              <Form.Item
                label="form name"
                name="FormName"
                rules={[{ required: true, message: 'Please enter the scheme name!' }]}
              >
                <Input type="text" style={{ width: '80%' }} placeholder="Please enter the form name" 
                 value={FormName} onChange={e => setFormName(e.target.value)} 
                />
              </Form.Item>
            </Form>
          </Modal>
        </div>
      );
}export default FormComponets

父组件
function TreeComponets(){

const [treeData, setTreeData] = useState([]);// 初始化树形数据

const FormSave = (data,value,node,setTreeData) => {
        onSave(data, value, node);  // 将setTreeData函数作为参数传递给onSave函数
        debugger
        const randomId = `SL-${Math.floor(Math.random() * 1000000)}`;
        const newNode = {
            title: data.FormName,
            value: randomId,
            key: randomId, // 添加key属性
            onClick: () => showModalBaisc(),
            children: [
            { title: `${data.ObjectName}`, value: `${randomId}-2`},
            { title: `${data.EnglishName}`, value: `${randomId}-3` }
            ]
        };
        // 找到目标节点并添加新的子节点
        let newData = [...treeData];

        const addDataToNode = (data, nodeId, newData) => {
            for (let i = 0; i < data.length; i++) {
            const item = data[i];
            if (item.value === nodeId) {
                item.children.push(newData);
                break;
            } else if (item.children && item.children.length > 0) {
                addDataToNode(item.children, nodeId, newData);
            }
            }
        };
        const newNodeData = {
            title: value,
            value: Math.random().toString(36).substr(2, 9),
            children: []
        };
        addDataToNode(newData, node, newNodeData);
        setTreeData([...treeData]);
        setIsModalOpenForm(false);
        // 将要传递给BasicDrawer子组件的数据赋值给basicData状态变量
        setBasicData({ ...data, nodeId: randomId });
      };

     return(

        <div>
            <TreeSelect  {...tProps} onSelect={onSelect}   treeData={treeData} />
            <FormComponets
                visible={isModalOpenForm}
                onClose={handleCloseModal}
                onSave={(data, value, node) => FormSave(data, value, node, setTreeData)}
                treeData={treeData}
                setTreeData={setTreeData}  // 确保将setTreeData函数作为属性传递给FormComponets
            />
           
        </div>
    );
}
export default TreeComponets;
以上是部分人的代码我在进行sava保存的时候出错了

Answer 1

在React中，数据流动是单向的，因此，当子组件需要将数据传递给父组件时，需要使用回调函数。你可以在父组件中定义一个函数来接收子组件传递过来的数据，并且把这个函数作为props传递给子组件。

当子组件需要将数据传递给父组件时，可以通过这个函数来进行传递。具体操作如下：

1. 在父组件中定义一个函数，用于接收子组件传递过来的数据：

function handleSaveData(data) {
  // 在这里进行保存操作
}

1. 将这个函数作为props传递给子组件：

<TreeComponent onSaveData={handleSaveData} />

1. 在子组件中，当用户点击保存按钮时，调用这个函数并传递数据：

function handleSave() {
  // 在这里获取从窗体输入的数据
  const data = ...

  // 调用父组件传递过来的函数，将数据传递给父组件
  props.onSaveData(data);
}

1. 现在，在父组件中就能够接收到子组件传递过来的数据了，然后就可以进行保存操作了。

function handleSaveData(data) {
  // 在这里进行保存操作
  // 将新的节点追加到加号标签下
}