如何更新react.js中的嵌套表单

时间:2018-05-21 19:13:21

标签: javascript reactjs

我在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

0 个答案:

没有答案