如何在React动态表单提交时获取所有输入框值？

1. 调整状态存储结构 #

把state里的frominput_values从空字符串改成空对象，用来存储所有输入的键值对：

constructor(props: ToscaDeploymentPageProps) {
    super(props);
    this.state = {
        frominput_values: {}, // 改为空对象存储多组输入值
    }
}

2. 修改输入变更处理函数 #

更新handleDefaultChange，从事件对象中获取当前输入的名称和值，只更新对应属性，保留其他输入的已有值：

const handleDefaultChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    this.setState(prevState => ({
        frominput_values: {
            ...prevState.frominput_values,
            [name]: value
        }
    }));
}

3. 修正输入框的标识与取值逻辑 #

因为不同分组（x/y/z）存在同名输入项（比如都有name为a的字段），需要给每个输入项设置唯一的name、id和fieldId，避免值被覆盖。同时统一value的取值逻辑：优先取用户输入的值，没有则用默认值，再为空字符串。

this.state.inputsdata[valuesmodel].map((valuesmodel1, _idx) => (                               
    <FormGroup 
        key={`${valuesmodel}-${_idx}`} // 添加唯一key避免React渲染警告
        isRequired 
        label={valuesmodel1.name} 
        fieldId={`${valuesmodel}-${valuesmodel1.name}`} // 唯一标识
    >
        <TextInput
            isRequired
            type="text"
            placeholder={valuesmodel1.default}
            id={`${valuesmodel}-${valuesmodel1.name}`} // 唯一DOM ID
            name={`${valuesmodel}-${valuesmodel1.name}`} // 唯一name用于区分输入项
            value={this.state.frominput_values[`${valuesmodel}-${valuesmodel1.name}`] || valuesmodel1.default || ''}
            onChange={handleDefaultChange}
        />
    </FormGroup>
))

4. 提交时传递完整表单值 #

提交按钮逻辑无需额外修改，此时this.state.frominput_values是包含所有输入项的对象，直接传入deploymodel即可：

<Button variant="primary" type="submit" onClick={ () => {this.deploymodel(this.state.frominput_values)}}>Submit</Button>

修改后的完整关键代码片段 #

deploymodel = (frominput_values: any) => {
    console.log("Frominput Values : ", frominput_values);
};

constructor(props: ToscaDeploymentPageProps) {
    super(props);
    this.state = {
        frominput_values: {},
    };
}

render() {
    const handleDefaultChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value } = event.target;
        this.setState(prevState => ({
            frominput_values: {
                ...prevState.frominput_values,
                [name]: value
            }
        }));
    };

    return (
        <>
            <Form>
                {this.state.inputsdata ?
                    Object.keys(this.state.inputsdata).map((valuesmodel, _I) => (
                        <FormFieldGroupExpandable
                            key={valuesmodel} // 添加唯一key
                            required
                            toggleAriaLabel={valuesmodel}
                            header={
                                <FormFieldGroupHeader
                                    titleText={{ text: `${valuesmodel} Inputs`, id: valuesmodel }}
                                />
                            }
                        >
                            {this.state.inputsdata ?
                                this.state.inputsdata[valuesmodel].map((valuesmodel1, _idx) => (
                                    <FormGroup
                                        key={`${valuesmodel}-${_idx}`}
                                        isRequired
                                        label={valuesmodel1.name}
                                        fieldId={`${valuesmodel}-${valuesmodel1.name}`}
                                    >
                                        <TextInput
                                            isRequired
                                            type="text"
                                            placeholder={valuesmodel1.default}
                                            id={`${valuesmodel}-${valuesmodel1.name}`}
                                            name={`${valuesmodel}-${valuesmodel1.name}`}
                                            value={this.state.frominput_values[`${valuesmodel}-${valuesmodel1.name}`] || valuesmodel1.default || ''}
                                            onChange={handleDefaultChange}
                                        />
                                    </FormGroup>
                                )) : "Loading..."
                            }
                        </FormFieldGroupExpandable>
                    )) : "Loading..."
                }
                <ActionGroup>
                    <Button variant="primary" type="submit" onClick={() => { this.deploymodel(this.state.frominput_values) }}>Submit</Button>
                </ActionGroup>
            </Form>
        </>
    );
}

内容的提问来源于stack exchange，提问作者Dhananjay Gahiwade