问题描述
我在 React 中有两个组件,它们在某种意义上都是两种形式。一个组件是某种类型的父表单,其中包含一个 map 函数,该函数迭代 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 的支持总监说这是不可能的,除非你事先预定义了所有的表单字段(对于每个映射的组件)。有人找到了解决方法吗?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)