react中的动态表单如何更新react.js中的嵌套状态字段答案

【问题标题】：dynamic form in react how to update nested state field in react.jsreact中的动态表单如何更新react.js中的嵌套状态字段
【发布时间】：2018-11-02 04:20:51
【问题描述】：

我的状态：

this.state = {
        name: '',
        subCatagory: [{ name: '', price: '', customize: [] }],
    };

我在 react.js 中的表单：

{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((customize, custIdx) => (
                        <div key={custIdx}>
                            <input
                                type="text"
                                placeholder={`subCatagory #${custIdx + 1} price`}
                                value={customize.name}
                                onChange={this.handlesubCatagoryChange(
                                    idx,
                                    'customize',
                                    custIdx
                                )}
                            />
                        </div>
                    ))}
                </div>
            ))}

我想每次在输入handlesubCatagoryChange 中更新值并且我的表单是动态表单时进行更新。这里我获取了第一个地图的索引，然后是第二个地图的索引，但无法更新状态反应

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您可以使用这样的函数更新数组中的项目

handlesubCatagoryNameChange = idx => e => {
    const value = e.target.value;

    this.setState(prevState => ({
        ...prevState,
        subCatagory: subCatagory.map((x, i) => {
            if (i === idx) {
                return {
                    ...x,
                    name: value
                }
            }

            return x
        })
    }))
}

（这仅适用于name，其他字段需要相同的方法）

这将使您的subCategory 数组保持不变，并且仅更新指定索引上的项目。

对于嵌套数组，您将执行相同的操作 - 像这样（如果我理解正确的话）

handlesubCatagoryChange  = (otherIdx, propertyPath, innerIdx) => e => {
    const value = e.target.value;

    this.setState(prevState => ({
        ...prevState,
        subCatagory: subCatagory.map((x, i) => {
            if (i === otherIdx) {
                return {
                    ...x,
                    [propertyPath]: x[propertyPath].map((y, j) => {
                        if (j === innerIdx) {
                            return {
                                ...y,
                                name: value
                            }
                        }

                        return y
                    })
                }
            }

            return x
        })
    }))
}

【讨论】：

handlesubCatagoryPriceChange = idx => evt => { const subCatagory = this.state.subCatagory.map((subCatagory, sidx) => { if (idx !== sidx) return subCatagory; return { ...subCatagory, price: evt.target.value }; }); this.setState({ subCatagory: subCatagory }); }; 对于单个数组，我使用了 map 函数，它工作正常，但不能在嵌套数组中做同样的事情
@User_3535 在您的要点中，您没有按照我在第二个代码示例中的建议进行操作。
是的。，你能建议我吗？或者你能提供一个要点吗？

【解决方案2】：

更改按钮也可以使用event

{this.handlesubCatagoryNameChange.bind(this,idx)}

然后使用Object.assign

handlesubCatagoryNameChange(idx,e){
        let subCatagory = Object.assign({}, this.state.subCatagory); //creating copy of object in state
        subCatagory[idx].name = e.target.value
        this.setState({ subCatagory });
    };

【讨论】：