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>
  );
}

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

该回答引用GPTᴼᴾᴱᴺᴬᴵ
如果你想让修改后的数据直接修改到组件传入的 data 对象中，并且在别的地方调用该组件时能够获取到更新后的数据，可以尝试以下方法：

  1. 在 CompensateAgreement 组件中定义一个新的 state，用来保存表单数据，初始值为组件传入的 data 对象。
  2. 在 changeInfo 方法中更新 state 中的数据。为了实现可以同时更新两个输入框的数据，可以给每个输入框加上一个 name 属性，根据 name 来更新对应的数据。
  3. 在 InputText 组件中，为每个输入框添加一个 name 属性，将该属性传递给 onChange 方法，以便在父组件中能够区分更新哪个输入框的数据。

修改后的代码如下：

export default function CompensateAgreement({ data = {} }) {
  const [formData, setFormData] = React.useState(data);

  const changeInfo = (event) => {
    const { name, value } = event.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value,
    }));
  };

  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,
  name,
  spaceLeft,
  spaceRight,
  underline = true,
  ...props
}) {
  return (
    <input
      type="text"
      name={name}
      value={value}
      className={classnames(['input-text'])}
      {...props}
      style={{
        minWidth: width,
        marginLeft: spaceLeft,
        marginRight: spaceRight,
      }}
    />
  );
}

这样，当你在输入框中修改数据时，会更新 formData 中对应的数据。在 CompensateAgreement 组件中使用更新后的数据即可。例如，如果想在别的地方获取更新后的 wtdlr 数据，可以通过 formData.wtdlr 来获取。

以下答案基于ChatGPT与GISer Liu编写：

可以通过将表单数据和输入框的值联系起来，在输入框的onChange事件中实现表单数据的同步更新。在changeInfo函数中，根据输入框的name属性获取到该输入框所对应的字段名，然后将其值更新到表单数据中。

①可以修改CompensateAgreement组件中的changeInfo函数如下：

const changeInfo = (event) => {
  const { name, value } = event.target;
  setData(prevData => ({
    ...prevData,
    [name]: value
  }));
};

②在InputText组件中，需要添加name属性来标识该输入框所对应的字段名。修改后的InputText组件如下：

export default function InputText({
  name,
  width,
  value,
  spaceLeft,
  spaceRight,
  underline = true,
  ...props
}) {
  return (
    <input
      type="text"
      name={name}
      value={value}
      className={classnames(['input-text'])}
      {...props}
      style={{
        minWidth: width,
        marginLeft: spaceLeft,
        marginRight: spaceRight,
      }}
    >

    </input>
  );
}

③使用该组件时，需要为每个输入框指定name属性，以便在changeInfo函数中正确地更新表单数据。例如：

return (
  <div className="template ">
    <p>
      委托代理人：
      <InputText
        name="wtdlr"
        width={200}
        value={data.wtdlr}
        spaceRight={50}
        contenteditable="true"
        onChange={changeInfo}
      />
      身份证号码：
      <InputText
        name="wtdlrsfz"
        width={200}
        value={data.wtdlrsfz}
        contenteditable="true"
        onChange={changeInfo}
      />
    </p>
  </div>
);

参考GPT和自己的思路，如果要实现输入框中修改的数据直接修改到 data 对象中，并确保别的地方调用到这个表单组件的时候获取到的数据要有 wtdlr 和 wtdlrsfz，可以在 CompensateAgreement 组件中定义一个 useState hook 来存储表单数据，并在 changeInfo 方法中更新对应的表单字段值。下面是修改后的代码：

import React, { useState } from 'react';

export default function CompensateAgreement({ data = {} }) {
  const [formData, setFormData] = useState(data);

  const changeInfo = (event) => {
    const { name, value } = event.target;
    setFormData((prevData) => ({ ...prevData, [name]: value }));
  };

  return (
    <div className="template">
      <p>
        委托代理人：
        <InputText
          name="wtdlr"
          width={200}
          value={formData.wtdlr}
          spaceRight={50}
          contentEditable="true"
          onChange={changeInfo}
        />
        身份证号码：
        <InputText
          name="wtdlrsfz"
          width={200}
          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="input-text"
      {...props}
      style={{
        minWidth: width,
        marginLeft: spaceLeft,
        marginRight: spaceRight,
        textDecoration: underline ? 'underline' : 'none',
      }}
    />
  );
}

上面的代码中，我们新增了一个 formData 状态用于存储表单数据，setFormData 方法用于更新表单数据，name 属性用于给 InputText 组件传递表单字段名，这样 changeInfo 方法就可以根据 event.target.name 获取当前修改的表单字段名，并更新对应的值。同时，我们也对 InputText 组件进行了一些样式上的调整。

请注意，在实际使用中，我们还需要确保输入框中输入的内容符合预期，比如身份证号码必须为 18 位等等。
如果对您有帮助，请给与采纳，谢谢。

React中的onChange事件是用来监听输入框的值变化的，你可以通过设置一个状态来存储输入框的值，并在onChange事件中更新状态。例如：

import React, {useState} from 'react'

function CompensateAgreement({ data = {} }) {
  // 设置两个状态来存储wtdlr和wtdlrsfz的值
  const [wtdlr, setWtdlr] = useState(data.wtdlr)
  const [wtdlrsfz, setWtdlrsfz] = useState(data.wtdlrsfz)

  // 定义两个函数来处理输入框的值变化
  const handleWtdlrChange = (event) => {
    setWtdlr(event.target.value)
  }

  const handleWtdlrsfzChange = (event) => {
    setWtdlrsfz(event.target.value)
  }

  return (
    <div className="template ">
          <p>
            委托代理人：
            <InputText
              width={200}
              value={wtdlr} // 使用状态作为输入框的值
              spaceRight={50}
              contenteditable="true"
              onChange={handleWtdlrChange} // 使用函数作为onChange事件处理器
            />
            身份证号码：
            <InputText
              width={200}
              value={wtdlrsfz} // 使用状态作为输入框的值
              contenteditable="true"
              onChange={handleWtdlrsfzChange} // 使用函数作为onChange事件处理器
            />
          </p>
      </div>
);
}

export default CompensateAgreement;

在 CompensateAgreement 组件中，changeInfo 函数需要根据输入框中修改的数据直接修改到 data 中，并确保别的地方调用到这个表单组件的时候获取到的数据要有 wtdlr 和 wtdlrsfz。

你可以将 changeInfo 函数改成以下形式：


const changeInfo = (event) => {
  const { name, value } = event.target;

  setData((prevData) => ({
    ...prevData,
    [name]: value,
  }));
};

这里假设 CompensateAgreement 组件是使用了 useState Hook 来管理 data 状态的，并将 setData 函数作为了一个参数传递给了 CompensateAgreement。

这样，你就可以在 InputText 组件中通过添加 name 属性来区分不同的输入框，并将 value 和 onChange 属性传递给 input 标签，例如：

<InputText
  name="wtdlr"
  width={200}
  value={data.wtdlr}
  spaceRight={50}
  contenteditable="true"
  onChange={changeInfo}
/>
<InputText
  name="wtdlrsfz"
  width={200}
  value={data.wtdlrsfz}
  contenteditable="true"
  onChange={changeInfo}
/>

这样，当用户在任意一个输入框中输入时，都会触发 changeInfo 函数，通过 event.target 获取到当前输入框的 name 和 value，并通过调用 setData 更新 data 状态。最终，data 状态中的 wtdlr 和 wtdlrsfz 属性就会被更新为用户输入的值。

看看这个思路：利用formRef.current.setFieldsValue()方法，设置的新值会同步到组件上显示。
参考示例：

//设置 表单中某个组件的值（formRef.current.getFieldsValue()中一定要有这个属性名）
    //直接
formRef.current.setFieldsValue({ landName: '新值' });
    //间接（已知inputId="landName"时）
formRef.current.setFieldsValue({ [inputId]: '新值' });

//组件
<Form className="rtk-form" ref={formRef}>
     <Form.Item
        label="地块名称"
        name="landName"
        colon={false}
        labelAlign="right"
        labelCol={{ span: 4 }}
        rules={[{ required: true, message: '请输入地块名称' }]}>
        <Input style={{ width: '93%', height: 40 }} placeholder="请输入地块名称" />
     </Form.Item>
</Form>

使用setFormData函数更新状态变量formData

import { useState } from 'react';

export default function CompensateAgreement({ data = {} }) {
  const [formData, setFormData] = useState(data);

  const changeInfo = (event) => {
    const { name, value } = event.target;
    setFormData((prevData) => ({ ...prevData, [name]: value }));
  };

  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>
  );
}

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,
        textDecoration: underline ? 'underline' : 'none',
      }}
    />
  );
}

该回答应用ChatGPT
可以使用React的state机制来实现表单组件字段的同步。首先，在表单组件中定义一个state变量，用于存储表单字段的值，然后在表单字段的onChange事件中更新state变量的值，从而实现表单字段的同步

不知道你这个问题是否已经解决, 如果还没有解决的话:

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^