Реагировать на функциональный родительский компонент, совместно использующий общие функции onChange без избыточного кода

Question

React может передавать функции onChange от функционального родителя к функциональному дочернему элементу, чтобы дочерний элемент мог использовать его для обновления родительского элемента.Но написание одних и тех же функций onChange в нескольких компонентах построения форм кажется излишним - и я надеюсь, что есть лучший способ создавать формы быстрее или более глобальный метод дочернего процесса, вызывающего родительские функции БЕЗ использования классов.

1. Я пытался создать внешнюю функцию и импортировать ее на все компоненты, которые создают формы и передают onChange компоненту Field.Но после их импорта у них нет автоматического доступа к части setValue statehook

2. Я попробовал Context, но вы не можете отправить динамическое начальное состояние, которое имеет всеполе / значения для вашей формы, так что вы получите ошибку, касающуюся контролируемых и неконтролируемых входных данныхэта форма, но мне пришлось бы избыточно переписать updateFieldState на КАЖДОМ компоненте, который создает как из этого создания.

   Буду признателен за любую помощь, предложения или учебные пособия о том, как создавать более быстрые формы без использования классов.

Answer 1

Рассматривали ли вы написание пользовательского хука ?

Вы могли бы иметь что-то вроде

function useFormHandler(initialData) {
  const [formData, setData] = useState(initialData);
  const fieldChangeHandler = e => {
    // actual implementation that uses setData
  }

  return [formData, fieldChangeHandler];
}

function Episode({ match }) {
  const [formData, fieldChangeHandler] = useFormHandler(content.form);
  ...
}

Если вы хотите избежать передачи fieldChangeHandler каждому полю вручнуюВы можете передать его компоненту <Form> и переписать его метод рендеринга, чтобы он фактически перенаправлял свойство fieldChangeHandler своим дочерним элементам (или использовал контекст).

Answer 2

По моему мнению, вы должны создать HOC, который состоит из вашей updateFieldState логики.

// withFieldFunctions.js
const withFieldFunctions = (WrappedComponent) => {
  const updateFieldState = e => {
    switch(e.target.type){
     case 'text':
     case 'textarea':
     case 'select-one':
      setValues({
        ...formValues,
        [e.target.id]: e.target.value
      });
      break;
     case "checkbox":
     . . . . . .(you get the idea here)
    }
  }

  return <WrappedComponent updateFieldState={updateFieldState} {...this.props} />
}

// SampleFormComponent.js
import withFieldFunction from './withFieldFunctions.js'

const SampleFormComponent = (props) => {
  return (
    <Form>
     <Field id="item_title" changeHandler={props.updateFieldState}/>
     <Field id="item_subtitle" changeHandler={props.updateFieldState}/>
    <Form>
  )
}

return withFieldFunctions(SampleFormComponent)

Таким образом, вы можете создать другую форму и обернуть ее с помощью withFieldFunctions

Answer 3

Я думаю, что вы ищете что-то обязательное.Вы можете использовать метод связывания или карри.Простое решение может быть основано на приведенном ниже ответе / примере.

const method = (salute, name) => `${salute} ${name}` 
const Mr = method.bind(null, "Mr.")
const Ms = method.bind(null, "Ms.")
Mr("Deepak")//"Mr. Deepak"
Ms("Rina")//"Ms. Rina"

Итак, ваше дело

onChnage.bind(null, "text")
onChnage.bind(null, "textarea")