时间戳

首页 > 解决方案 > 如何在反应中将动态属性映射到元素括号函数？

javascript - 如何在反应中将动态属性映射到元素括号函数？

问题描述

我试图将状态属性作为值映射到使用反应生成的表单输入，但到目前为止还没有成功。下面的示例显示了我尝试做的事情，但是将 group.value 作为字符串导入的错误方式，并且不会被编译为状态变量的值。有谁知道如何做到这一点？我需要动态调用最终对象和属性（在此示例框架和品牌/年份/型号中）

地图功能：

return frameData.map((group) => {
            return (
                <div className="form-group">
                    <div className="col-sm-8">
                        <input
                            type="text"
                            className="form-control"
                            id={group.name}
                            name={group.name}
                            placeholder={group.placeHolder}
                            value={group.value}
                            onChange={(event) => this.updateValue(event)}
                        />
                    </div>
                </div>
            );
        });

数据集

const frameData = [
    {
        name: "frame-brand",
        placeHolder: "Brand",
        value: "{this.state.newSubmission.frame.brand}",
    },
    {
        name: "frame-year",
        placeHolder: "Year",
        value: "{this.state.newSubmission.frame.year}",
    },
    {
        name: "frame-model",
        placeHolder: "Model",
        value: "{this.state.newSubmission.frame.model}",
    },
];

状态

    this.state = {
        newSubmission: 
          frame: {
            year: "",
            model: "",
            brand: "",
          }
    };

标签： javascriptreactjs

解决方案

您要实现的目标很酷，但是您可以传递变量名（即整个状态对象），而不是传递变量名，key然后将其分配给<input />组件。

const frameData = [
    {
        name: "frame-brand",
        placeHolder: "Brand",
        value: "brand",
    },
    {
        name: "frame-year",
        placeHolder: "Year",
        value: "year",
    },
    {
        name: "frame-model",
        placeHolder: "Model",
        value: "model",
    },
];

在地图功能中，您可以使用

return frameData.map((group) => {
        return (
            <div className="form-group">
                <div className="col-sm-8">
                    <input
                        type="text"
                        className="form-control"
                        id={group.name}
                        name={group.name}
                        placeholder={group.placeHolder}
                        value={this.state.newSubmission.frame[group.value]}
                        onChange={(event) => this.updateValue(event)}
                    />
                </div>
            </div>
        );
    });

推荐阅读