Блог

Это пример того, как часть рендеринга моего FormHandler.js похоже на:

 return (
  <div>
    <CustomForm1 data={ testProps1 }/>
    <CustomForm2 data={ testProps2 }/>
  </div>
)
 

Пользовательские формы-это два компонента формы, которые я создал, и каждый из них имеет свои собственные запросы «получить» и «отправить» на серверную часть (в данном случае django).

Можно ли было бы:

Во — первых, создайте кнопку в FormHanlder.js чтобы отправить значения компонентов пользовательской формы, используя их соответствующие функции «post»

И, во-вторых, извлеките значения, введенные в каждой пользовательской форме, и обработайте их в CustomForms.js перед отправкой. Например, предполагая, что это в CustomForm1.js:

 <input name="customField" />
 

Может быть, я мог бы использовать что-то вроде:

 let fieldValue = CustomForm1.customField.value;
 

Из функции внутри FormHandler.js, чтобы я мог произвести некоторые дополнительные вычисления перед отправкой.

Хотя вы не можете перейти от ребенка к родителю (снизу вверх), вы всегда можете перейти сверху вниз от родителя к ребенку, используя распространение состояний. Объявите переменную состояния и ее обработчик изменений внутри FormHandler.js и передайте его в качестве опоры компоненту пользовательской формы. Допустим, вам нужно 1 дополнительное поле, как в пользовательской форме 1. Код должен выглядеть примерно так:

Внутри FormHandler.js (При условии, что вы используете функциональные компоненты)

 function FormHandler() {
    const [customFieldForForm1, setCustomFieldForForm1] = React.useState("");
    // inside your submit handler you can easily use this customFieldForForm1 value
    ...
    return (
        <div>
            <CustomForm1 data={testProps1} customField={customFieldForForm1} onCustomFieldChange={setCustomFieldForForm1} />
            <CustomForm2 data={testProps2} />
        </div>
    )
}
 

внутри CustomForm1.js

 function CustomForm1(props) {
    return (
        <form ...>
            ...
            <input name="customField" value={props.customField} onChange={props.onCustomFieldChange} />
            ...
        </form>
}