Блог

У меня есть два компонента в React, которые в некотором смысле являются обеими формами. Один компонент представляет собой родительскую форму некоторого рода, которая содержит функцию сопоставления, которая выполняет итерацию по children элементу состояния для создания нескольких дочерних вложенных форм. Это означает, что пользователи, использующие формы, могут нажать кнопку, чтобы добавить новый экземпляр дочернего компонента Subform под кнопкой в родительской форме.

Моя текущая проблема заключается в том, что я не могу заставить форму собирать дочерние элементы в формах Netlify. У меня есть data-netlify="true" и скрытый ввод, поэтому родительская форма распознается, однако, когда я отправляю форму, принимаются только входные данные в родительской форме, как я могу изменить свои настройки или код, чтобы позволить netlify определять значения динамических компонентов, чтобы они отправлялись вместе с другими данными?

Как вы можете видеть, я также попытался сохранить все данные формы в элементах состояния и отправить их, но я все еще не вижу значений. Это как-то связано с тем, что Netlify создает статический сайт и заранее определяет все значения формы?

BookNow.js (Родительская форма)

 import React, { Component } from 'react'

import ChildSubForm from './ChildSubForm'

export default class BookNow extends Component {
    state = {
        name: "",
        email: "",
        otherInfo: "",
        children: []
    }

    constructor(props) {
        super(props)
        this.addChild = this.addChild.bind(this);
        this.decrementChild = this.decrementChild.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    addChild() {
        this.setState({
            children: [...this.state.children, { name: "", year: "Year 7" }]
        })
    }

    decrementChild(i) {
        this.setState({
            children: this.state.children.filter((item, j) => i !== j)
        })
    }

    handleChange(e) {
        if (["name", "year"].includes(e.target.className)) {
            let children = [...this.state.children]
            children[e.target.dataset.id][e.target.className] = e.target.value
            this.setState({ children }, () => console.log(this.state.children))
        } else {
            this.setState({ [e.target.name]: e.target.value })
        }
    }

    handleSubmit(e) {
        e.preventDefault()
    }


    render() {
        if(this.props.isChild) {
            return (
                <form name="Booking Form" method="POST" data-netlify="true">
                    <input type="hidden" name="form-name" value="Booking Form" />
                    <input type="text" name="name" placeholder="Your Name" />
                    <select name="year-group">
                        <option value="Year 7">Year 7</option>
                        <option value="Year 8">Year 8</option>
                        <option value="Year 9">Year 9</option>
                        <option value="Year 10">Year 10</option>
                        <option value="Year 11">Year 11</option>
                        <option value="Year 12">Year 12</option>
                        <option value="Year 13">Year 13</option>
                        <option value="GCSE Retake">GCSE Retake</option>
                    </select><br />
                    <input type="email" name="email" placeholder="Your Email Address" /><br />
                    <textarea name="otherInfo" placeholder="Any more information..." /><br />
                    <button type="submit">Book Now</button>
                </form>
            )
        } else {
            return (
                <form onChange={this.handleChange} onSubmit={this.handleSubmit} name="Booking Form" method="POST" data-netlify="true">
                    <input type="hidden" name="form-name" value="Booking Form" />
                    <input type="text" name="name" placeholder="Your Name" /><br />
                    <input type="email" name="email" placeholder="Your Email Address" /><br />
                    <button onClick={this.addChild} name="add">  Add Child</button><br />
                    {
                        this.state.children.map((child, i) => <ChildSubForm key={i} childNum={i} value={this.state.children[i]} dec={() => this.decrementChild(i)} />)
                    }
                    <textarea name="otherInfo" placeholder="Any more information..." /><br />
                    <button type="submit">Book Now</button>
                </form>
            )
        }
    }
}
 

ChildSubForm.js

 import React, { Component } from 'react'

export default class ChildSubForm extends Component {
    render() {
        const values = {
            name: `child-name-${this.props.childNum}`,
            year: `child-${this.props.childNum}-year-group`
        }
        return (
            <div className="ChildSubForm">
                <input type="text" id={values.name} name={values.name} data-id={this.props.childNum} value={this.props.value.name} className="name" placeholder="Child's Name" required />
                <select name={values.year} id={values.year} data-id={this.props.childNum} id={values.year} value={this.props.value.year} className="year">
                    <option value="Year 7">Year 7</option>
                    <option value="Year 8">Year 8</option>
                    <option value="Year 9">Year 9</option>
                    <option value="Year 10">Year 10</option>
                    <option value="Year 11">Year 11</option>
                    <option value="Year 12">Year 12</option>
                    <option value="Year 13">Year 13</option>
                    <option value="GCSE Retake">GCSE Retake</option>
                </select>
                <button onClick={this.props.dec} name="remove">- Remove Child</button><br />
            </div>
        )
    }
}
 

Обновить:

Итак, я немного почитал и нашел сообщение, в котором предлагалось сделать то же самое, и директор службы поддержки Netlify сказал, что это пока невозможно, если вы заранее не определите все поля формы (для каждого из отображаемых компонентов). Кто-нибудь нашел обходной путь для этого?

Сообщение Netlify