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

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

酒店名称
副词
{this.state.subtagory.map（（subtagory，idx）=>(
删除
顾客有空吗？
{subtagory.customize.map（（gj，idx）=>(
))}
))}
添加新子类别
将菜单添加到项目

在这里，我使用映射函数呈现输入，当我们添加一个新的子标记时，一个新的json将添加一个新的子标记，并且对于它们正在更新的输入，但是当我添加新的子标记-->自定义时，值不会在子标记-->自定义中更新

---

我的要点

当您更改输入值时，

console.log

with

gjj（）

打印什么？由于您没有在

gjj（）

中更新状态，因此不会看到反映输入的更改。是的，我的问题是当我更改值时，它必须推送到该输入