Question

我的状态：

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中的值并且我的表单是动态的时更新。在这里我获取第一个地图的索引然后第二个地图的索引但是无法更新反应状态

Answer 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
        })
    }))
}

Answer 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 });
    };

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

2 个答案: