我在react.js中创建了一个表单,如下所示
this.state = {
name: '',
subCatagory: [{ name: '', price: '', customize: [] }],
};
我的表格如下:
<form>
<h4>Hotel Name</h4>
<input
type="text"
placeholder="Enter Hotel Name"
value={this.state.name}
onChange={this.handleMainItemNameChange}
/>
<h4>subCatagory</h4>
{this.state.subCatagory.map((subCatagory, idx) => (
<div className="subCatagory" key={idx}>
<input
type="text"
placeholder={`Enter Dish #${idx + 1} name`}
value={subCatagory.name}
onChange={this.handlesubCatagoryNameChange(idx)}
/>
<input
type="number"
placeholder={`subCatagory #${idx + 1} price`}
value={subCatagory.price}
onChange={this.handlesubCatagoryPriceChange(idx)}
/>
<button
type="button"
onClick={this.handleRemovesubCatagory(idx)}
className="small"
>
Delete
</button>
<button type="button" onClick={this.addNewCust(idx)} className="small">
is cust availble?
</button>
{subCatagory.customize.map((gj, idx) => (
<div key={idx}>
<input
type="number"
placeholder={`subCatagory #${idx + 1} price`}
value={gj.name}
key={gj.key}
onChange={this.gjj(idx)}
/>
</div>
))}
</div>
))}
<button type="button" onClick={this.handleAddsubCatagory} className="small">
Add new Subcat
</button>
<button type="button" onClick={this.handleSubmit}>
Add menu to item
</button>
</form>
这里我使用map fuction来提交输入,当我们添加一个新的jcson将添加一个新的子目录时,以及它们正在更新的输入,但是当我添加新的subCatagory时 - >自定义值未在subCatagory中更新 - &gt;自定义
我的要点https://gist.github.com/gjgit/d8da23cfb08b73513b0b7aae758b8503