Reactjs отправляет несколько форм
Это пример того, как выглядит часть отрисовки моего FormHandler.js:
return (
<div>
<CustomForm1 data = { testProps1 }/>
<CustomForm2 data = { testProps2 }/>
</div>
)
CustomForms - это два компонента формы, которые я создал, и каждый из них имеет свои собственные запросы на получение и отправку в серверную часть (в данном случае django).
Можно ли:
Во-первых, создайте кнопку в FormHanlder.js для отправки значений компонентов пользовательской формы, используя их соответствующие функции «публикации».
А во-вторых, извлеките значения, введенные в каждую CustomForm, и обработайте их в CustomForms.js перед отправкой. Например, если это находится в CustomForm1.js:
<input name = "customField" />
Может быть, я мог бы использовать что-то вроде:
let fieldValue = CustomForm1.customField.value;
Из функции внутри FormHandler.js, чтобы я мог произвести дополнительные вычисления перед отправкой.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Хотя вы не можете переходить от дочернего к родительскому (снизу вверх), вы всегда можете идти сверху вниз от родителя к дочернему, используя распространение состояния. Объявите переменную состояния и ее обработчик изменений внутри FormHandler.js и передайте его как опору компоненту настраиваемой формы. Допустим, вам нужно 1 дополнительное поле, как в CustomForm1. Код должен выглядеть примерно так:
Внутри 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>
}
Большое спасибо! Я определенно могу сделать это так, как хочу