童话里做英雄529 2023-02-22 14:04 采纳率: 66.7%
浏览 108
已结题

react实现表单组件字段同步怎么做

后端没学过react,新来的前端还没入职,让我看看能不能改
用的hook,没用class
表单数据是传入的,

export default function CompensateAgreement({ data = {} }) {
   const changeInfo = (event) => {
       这里怎么写?要实现实现输入框中修改的数据直接修改到data,别的地方调用到这个表单组件的时候获取到的数据要有wtdlr和wtdlrsfz
       
  };

return (
    <div className="template ">
          <p>
            委托代理人:
            <InputText
              width={200}
              value={data.wtdlr}这里我不知道写的对不对
              spaceRight={50}
              contenteditable="true"
              onChange={changeInfo}
            />
            身份证号码:
            <InputText
              width={200}
              value={data.wtdlrsfz}
              contenteditable="true"
              onChange={changeInfo}
            />
          </p>
      </div>
);
}
这个是输入框组件
export default function InputText({
  width,
  value,
  spaceLeft,
  spaceRight,
  underline = true,
  ...props
}) {
  return (
    <input
      type="text"
      value={value}
      className={classnames(['input-text'])}
      {...props}
      style={{
        minWidth: width,
        marginLeft: spaceLeft,
        marginRight: spaceRight,
      }}
    >

    </input>
  );
}
  • 写回答

9条回答 默认 最新

  • 程序yang 全栈领域优质创作者 2023-02-22 17:14
    关注

    仅供参考:
    要实现表单组件字段同步,需要使用React的状态管理机制。在这个例子中,可以使用useState hook来创建一个状态变量,用来存储表单数据。然后在changeInfo函数中更新这个状态变量,并将其传递给父组件的props,以便在别的地方调用到这个表单组件时获取到更新后的数据。

    下面是代码示例:

    import React, { useState } from 'react';
    
    export default function CompensateAgreement({ data = {}, onDataChange }) {
      const [formData, setFormData] = useState(data);
    
      const changeInfo = (event) => {
        const { name, value } = event.target;
        const newFormData = { ...formData, [name]: value };
        setFormData(newFormData);
        onDataChange(newFormData);
      };
    
      return (
        <div className="template">
          <p>
            委托代理人:
            <InputText
              width={200}
              name="wtdlr"
              value={formData.wtdlr}
              spaceRight={50}
              contenteditable="true"
              onChange={changeInfo}
            />
            身份证号码:
            <InputText
              width={200}
              name="wtdlrsfz"
              value={formData.wtdlrsfz}
              contenteditable="true"
              onChange={changeInfo}
            />
          </p>
        </div>
      );
    }
    
    export default function InputText({
      width,
      value,
      spaceLeft,
      spaceRight,
      underline = true,
      ...props
    }) {
      return (
        <input
          type="text"
          value={value}
          className={classnames(['input-text'])}
          {...props}
          style={{
            minWidth: width,
            marginLeft: spaceLeft,
            marginRight: spaceRight,
          }}
        />
      );
    }
    

    在上面的代码中,我们使用了useState hook来创建formData状态变量,并将其初始化为传入的data参数。changeInfo函数会在每次输入框的值发生变化时被调用,并根据输入框的name属性来更新formData中对应的字段的值。然后,我们调用setFormData来更新formData的值,并调用onDataChange将更新后的formData传递给父组件。在父组件中,我们需要定义一个onDataChange函数来接收更新后的表单数据。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(8条)

报告相同问题?

问题事件

  • 系统已结题 3月3日
  • 已采纳回答 2月23日
  • 赞助了问题酬金15元 2月22日
  • 创建了问题 2月22日

悬赏问题

  • ¥15 CMAKE+VS2019+QT5.15.2组合进行二次编译
  • ¥15 nginx 配置静态html访问 ,后台登录时页面始终被重定向到登录页,无法访问到后台的静态html页
  • ¥20 自动登录的j2ee程序编译
  • ¥15 fluent模拟静态气体扩散
  • ¥15 java根据模板,生成word文档,需要带目录
  • ¥15 广告联盟的兜底广告是什么意思
  • ¥15 如何证明高斯噪声的包络公式
  • ¥150 寻找王者荣耀开发作者,合作或者解答
  • ¥15 关于cpci总线的几个问题,别用人工智能回答
  • ¥15 乳腺癌数据集 相关矩阵 特征选择