Как обновить инпут формы?

Question

[Mark321]

Добрый день, возможно кто-то сталкивался и может помочь
использую библиотеку antd, использую форму
в форме есть инпуты, мне при клике на элемент надо его показывать (что бы форма принимала его значения)
я делаю так
initialValue={person?.firstName}
где персон - это значение из стора
если я пишу
<div>{person?.firstName}</div>
то все корректно обновляется
в документации я нашел это

You cannot set value for each form control via value or defaultValue prop, you should set default value with initialValues of Form. Note that initialValues cannot be updated by setState dynamically, you should use setFieldsValue in that situation.

You shouldn't call setState manually, please use form.setFieldsValue to change value programmatically.

но я не понимаю, как мне использовать

form.setFieldsValue

все что я придумал

useEffect(() => form.resetFields(), [form, person])

но такое решение плохое, при изменении полей формы, все дребежит
вот весь код

Код

const validateMessages = {
  required: '${label} is required!',
  types: {
    email: '${label} is not a valid email!',
    number: '${label} is not a valid number!',
  },
  number: {
    range: '${label} must be between ${min} and ${max}',
  },
}

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
}
const config = {
  rules: [
    { type: 'object' as const, required: true, message: 'Please select time!' },
  ],
}

const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY']

const { Option } = Select

export const CurrentEmployee = () => {
  const [form] = Form.useForm()
  const person = useStore($isPerson)
  const dateFormat = 'YYYY/MM/DD'

  useEffect(() => form.resetFields(), [form, person])

  return (
    <Form
      className={styles.currentEmployee__form}
      form={form}
      layout="vertical"
      name="form_in_modal"
      initialValues={{ modifier: 'public' }}
    >
      <Form.Item
        name={['user', 'name']}
        label="FirstName"
        rules={[{ required: true }]}
        initialValue={person?.firstName}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name={['user', 'lastName']}
        label="LastName"
        rules={[{ required: true }]}
        initialValue={person?.lastName}
      >
        <Input />
      </Form.Item>
      <Form.Item name="birthday" label="Birthday" {...config}>
        <DatePicker
          defaultValue={moment(`1`, dateFormat)}
          format={dateFormatList}
        />
      </Form.Item>
      <Form.Item
        name="gender"
        label="Gender"
        rules={[{ required: true, message: 'Please select gender!' }]}
      >
        <Select defaultValue={person?.gender} placeholder="select gender">
          <Option value="Male">Male</Option>
          <Option value="Female">Female</Option>
        </Select>
      </Form.Item>
      <Form.Item
        name="position"
        label="Position"
        rules={[{ required: true, message: 'Please select position!' }]}
      >
        <Select defaultValue={person?.position} placeholder="select position">
          <Option value="Waiter">Waiter</Option>
          <Option value="Cook">Cook</Option>
          <Option value="Shift manager">Shift manager</Option>
          <Option value="Harvester">Harvester</Option>
        </Select>
      </Form.Item>
      <Form.Item
        name="zeitplan"
        label="Zeitplan"
        rules={[{ required: true, message: 'Please select zeitplan!' }]}
      >
        <Select defaultValue={person?.zeitplan} placeholder="select zeitplan">
          <Option value="2/2">2/2</Option>
          <Option value="3/3">3/3</Option>
          <Option value="3/2">3/2</Option>
          <Option value="5/2">5/2</Option>
        </Select>
      </Form.Item>
    </Form>
  )
}

Answer 1

[Semantic.Moscow]

<div id="txt"></div><input type="text" oninput="typeit(this.value)"/>
<script>function typeit(text){
document.getElementById('txt').innerHTML=text;}</script>

не внимательно (наверное) прочитал.
если нужно в обратную сторону,
т.е. кликать по тексту, который должен вставляться в input, то так:

<div id="person">ВВП</div>
<input id="txt" type="text"/>
<script>
document.getElementById('person').addEventListener('click',(e)=>{
document.getElementById('txt').value=document.getElementById('person').innerHTML;});
</script>