Как получить разные значения типа ввода с помощью одной функции?

Question

У меня есть форма с разными входами. Все входы имеют одинаковую функцию, поэтому значение, которое вы вводите на одном входе, также видно на других входах, и это не является намерением. Может кто-нибудь сказать мне, как это исправить.

export function Form() {
  const [fieldValue, setFieldValue] = React.useState('')

  return (
    <form className={styles.component}>
      <div className={styles.form}>
        <FormFieldInput value={fieldValue} onChange={setFieldValue} label='Voornaam' description='Opmerkingen' error='Iets is mis gegaan' />
        <FormFieldInput value={fieldValue} onChange={setFieldValue} label='Achternaam' description='Opmerkingen' error='Iets is mis gegaan' />
        <FormFieldNumber value={fieldValue} onChange={setFieldValue} label='Leeftijd' description='Opmerkingen' error='Iets is mis gegaan' />
        <FormFieldTextArea value={fieldValue} onChange={setFieldValue} label='Text' description='Opmerkingen' error='Iets is mis gegaan' />
      </div>
    </form>
  )
}


export function FormFieldInput({ onChange, value, label, description, error }) {
      return (
        <FormFieldBase className={styles.componentInput}>
          <label className={styles.label}>{label}</label>
          <input type='text' className={styles.input}
            onChange={handleChange} {...{ value }} />
          <p className={styles.description}>{description}</p>
          { !handleChange &&  <p className={styles.error}>{error}</p> }
        </FormFieldBase>
      )
      function handleChange(e) {
        onChange(e.target.value)
      }
    }



export function FormFieldTextArea({ onChange, label, value, description, error }) {
      return (
        <FormFieldBase className={styles.componentTextArea}>
          <label className={styles.label}>{label}</label>
          <input type='text' className={styles.input}
            onChange={handleChange} {...{ value }} />
          <p className={styles.description}>{description}</p>
          { !handleChange && <p className={styles.error}>{error}</p> }
        </FormFieldBase>
      )
      function handleChange(e) {
        onChange(e.target.value)
      }
    }

Answer 1

Вам необходимо сохранить объект, соответствующий каждому входному значению, а также предоставить обработчик, который принимает значение из каждого входного значения и устанавливает его в состояние на основе имени. Для этого передайте имя prop каждому входному полю и добавьте его в качестве атрибута в поле ввода внутри. Также вы должны написать собственный handleChange в parent и использовать его непосредственно для обработчика onChange в child

export function Form() {
  const [fieldValue, setFieldValue] = React.useState({})
  const handleChange = e => {
    const {name, value} = e.target;
    setFieldValue(prev => ({
       ...prev,
       [name]: value,
    }))
  }
  return (
    <form className={styles.component}>
      <div className={styles.form}>
        <FormFieldInput value={fieldValue['Voornaam']} onChange={sethandleChangeieldValue} name="voornaam" label='Voornaam' description='Opmerkingen' error='Iets is mis gegaan' />
        <FormFieldInput value={fieldValue["achternaam"]} name="achternaam" onChange={handleChange} label='Achternaam' description='Opmerkingen' error='Iets is mis gegaan' />
        <FormFieldNumber value={fieldValue["leeftijd"]} name="leeftijd" onChange={handleChange} label='Leeftijd' description='Opmerkingen' error='Iets is mis gegaan' />
        <FormFieldTextArea value={fieldValue['text']} name="text" onChange={handleChange} label='Text' description='Opmerkingen' error='Iets is mis gegaan' />
      </div>
    </form>
  )
}


export function FormFieldInput({ onChange, value, label, description, error }) {
      return (
        <FormFieldBase className={styles.componentInput}>
          <label className={styles.label}>{label}</label>
          <input type='text' name={name} className={styles.input}
            onChange={onChange} {...{ value }} />
          <p className={styles.description}>{description}</p>
          { !handleChange &&  <p className={styles.error}>{error}</p> }
        </FormFieldBase>
      )
    }



export function FormFieldTextArea({ onChange, name, label, value, description, error }) {
      return (
        <FormFieldBase className={styles.componentTextArea}>
          <label className={styles.label}>{label}</label>
          <input type='text' name={name} className={styles.input}
            onChange={onChange} {...{ value }} />
          <p className={styles.description}>{description}</p>
          { !handleChange && <p className={styles.error}>{error}</p> }
        </FormFieldBase>
      )
    }

PS Аналогичное изменение, которое вам нужно сделать для FormFieldNumber тоже