开发者社区> 问答> 正文

子表单问题

如何让子表单中的文本组件等于主表单下拉单选组件的文本?

展开
收起
DRAGON 2023-10-11 17:09:28 50 0
3 条回答
写回答
取消 提交回答
  • 面对过去,不要迷离;面对未来,不必彷徨;活在今天,你只要把自己完全展示给别人看。

    如果你想要让子表单中的文本组件等于主表单下拉单选组件的文本,你可以使用React的状态管理机制来实现。具体来说,你可以在父组件中维护一个状态变量,用于存储下拉单选组件的文本值,然后在子组件中读取这个状态变量,并将文本组件的值设置为这个状态变量的值。
    以下是一个使用React的状态管理机制来实现这个功能的示例代码:

    import React, { useState } from 'react';
    
    function Parent() {
      const [dropdownText, setDropdownText] = useState('原始文本');
    
      function handleDropdownChange(event) {
        setDropdownText(event.target.value);
      }
    
      return (
        <div>
          <Dropdown onDropdownChange={handleDropdownChange} />
          <Child dropdownText={dropdownText} />
        </div>
      );
    }
    
    function Dropdown({ onDropdownChange }) {
      return (
        <select onChange={onDropdownChange}>
          <option value="选项1">选项1</option>
          <option value="选项2">选项2</option>
          <option value="选项3">选项3</option>
        </select>
      );
    }
    
    function Child({ dropdownText }) {
      return (
        <div>
          <Text text={dropdownText} />
        </div>
      );
    }
    
    function Text({ text }) {
      return (
        <div>
          <p>{text}</p>
        </div>
      );
    }
    
    export default Parent;
    

    在这个示例中,我们首先在父组件中定义了一个状态变量dropdownText,用于存储下拉单选组件的文本值。然后,我们定义了一个handleDropdownChange函数,当下拉单选组件的值改变时,会调用这个函数来更新状态变量的值。接着,我们在Parent组件中使用<Dropdown><Child>组件来分别表示下拉单选组件和子表单中的文本组件。在Child组件中,我们将dropdownText状态变量的值传给Text组件,然后在Text组件中将这个值显示出来。
    这样,每当下拉单选组件的值改变时,dropdownText状态变量的值也会相应地改变,从而更新子表单中的文本组件的值。

    2023-10-12 11:28:15
    赞同 展开评论 打赏
  • 您可以使用 Excel 的数据连接功能来实现子表单中的文本组件等于主表单下拉单选组件的文本。具体步骤如下:

    1. 在主表单中,选择下拉单选组件,然后单击“数据”选项卡上的“编辑连接”。
    2. 在“编辑连接”对话框中,选择要链接到的主表单字段,然后单击“确定”。
    3. 在子表单中,选择文本组件,然后在“数据”选项卡上单击“来自其他表单”。
    4. 在“来自其他表单”对话框中,选择要链接到的主表单和字段,然后单击“确定”。
    2023-10-11 22:40:02
    赞同 展开评论 打赏
  • 十年摸盘键,代码未曾试。 今日码示君,谁有上云事。

    可以使用关联表单组件的数据填充功能,如果关联表单与子表单配合使用,目前只支持单行的数据公式联动,如果是多行的子表填充场景暂不支持。

    通过 JS 给关联表单组件赋值操作步骤:

    复制下方代码后可按照以下截图进行修改:

    this.$('关联表单组件id').setValue( [   {     appType: 'APP_XOXRQ4842LVM51RRJC7N',  //应用编码     formType: 'receipt',    //此处代表关联表单绑定的表达类型  receipt或process     formUuid: 'FORM-DFYJ319VV0ILV3BW1C8HHBHHJPXI3X095L5IK1',  //表单唯一ID     instanceId: 'FINST-DFYJ319VD4IL2SMEZH8Q63MY7UR3302NRL5IK1',  //关联的数据实例ID     subTitle: 'BB',  //次要字段信息     title: 'AA',  //主要字段信息   },   {     appType: 'APP_XOXRQ4842LVM51RRJC7N',  //应用编码formType: 'receipt',    //此处代表关联表单绑定的表达类型  receipt或process     formUuid: 'FORM-DFYJ319VV0ILV3BW1C8HHBHHJPXI3X095L5IK2',  //表单唯一ID     instanceId: 'FINST-DFYJ319VD4IL2SMEZH8Q63MY7UR3302NRL5IK2',  //关联的数据实例ID     subTitle: 'DD',  //次要字段信息     title: 'CC',  //主要字段信息   }   …… ] )

    以上仅供参考参考,具体请结合自己实际情况斟酌。

    2023-10-11 18:45:43
    赞同 2 展开评论 打赏
问答地址:
关联地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载