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

Question

后端没学过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>
  );
}

Answer 1

仅供参考：
要实现表单组件字段同步，需要使用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函数来接收更新后的表单数据。