reactjs - Netlify 中的动态表单

Question

我在 React 中有两个组件，在某种意义上它们都是形式。一个组件是某种父表单，它包含一个映射函数，该函数遍历一个children状态项以生成许多子子表单。这意味着使用表单的人可以单击按钮在父表单中的按钮下方添加 ChildSubForm 组件的新实例。

我目前的问题是我无法获得表格以在 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 发布

标签： reactjsformsnetlifynetlify-form