Javascript 通过react中的变量名称获取变量

我需要将输入元素的值分配给一个变量，我的表单包含10个输入，每个输入都有唯一的id，并且变量的数量与输入id的名称相同，此外，我还为所有输入分配了一个函数

saveChanges（）

onChange属性类如下

class MainClass extends React.Component {
    render() {
        var field1 = "";
        var field2 = "";
        var date1 = "";
        var description = "";
        //...
        function saveChanges() {
            document.getElementsByClassName("inputs").onchange = function (event) {
                // tried to use window["variable name"] to access the variables but page broke and goes into repetitive reload
                // need to know that is there any other method to save the changed value to respective variable
                window[event.target.id] = event.target.value;
            }
        }
        function sendDetails() {
            // use the values of the variables and send through rest api
        }
        return (
            <div>
                lable1:
                <input id="field1" className="inputs" type="text" onChange={saveChanges } /><br />
                lable2:
                <input id="field2" className="inputs" type="text" onChange={saveChanges } /><br />
                date1:
                <input id="date1" className="inputs" type="text" onChange={saveChanges } /><br />
                Description:
                <textarea id="discription" className="inputs" onChange={saveChanges }>
                </textarea>
                //...
                <button id="sendDetails" onClick={sendDetails }>
                    Send
                </button>
            </div>
        );
    }
}

class MainClass扩展了React.Component{
render（）{
var field1=“”；
var field2=“”；
var date1=“”；
var description=“”；
//...
函数saveChanges（）{
document.getElementsByClassName（“输入”）.onchange=函数（事件）{
//试图使用window[“variable name”]访问变量，但页面中断并进入重复重新加载
//需要知道是否有其他方法将更改后的值保存到相应的变量中
窗口[event.target.id]=event.target.value；
}
}
函数sendDetails（）{
//使用变量的值并通过RESTAPI发送
}
返回(
标签1：


标签2：


日期1:


说明：
//...
发送
);
}
}

---

关于这方面的任何建议都会很有帮助。

您可以为输入命名，并通过

event.target.name访问它：

class MainClass extends React.Component {
    render() {
        var field1 = "";
        var field2 = "";
        var date1 = "";
        var description = "";
        //...
        function saveChanges(e) {
            this.setState({[e.target.name]: e.target.value});
        }
        function sendDetails() {
            // use the values of the variables and send through rest api
            console.log(this.state);
        }
        return (
            <div>
                lable1:
                <input id="field1" name="field1" className="inputs" type="text" onChange={saveChanges } /><br />
                lable2:
                <input id="field2" name="field2" className="inputs" type="text" onChange={saveChanges } /><br />
                date1:
                <input id="date1" name="date1" className="inputs" type="text" onChange={saveChanges } /><br />
                Description:
                <textarea id="discription" className="inputs" onChange={saveChanges }>
                </textarea>
                //...
                <button id="sendDetails" onClick={sendDetails }>
                    Send
                </button>
            </div>
        );
    }
}

class MainClass扩展了React.Component{
render（）{
var field1=“”；
var field2=“”；
var date1=“”；
var description=“”；
//...
功能保存更改（e）{
this.setState（{[e.target.name]：e.target.value}）；
}
函数sendDetails（）{
//使用变量的值并通过RESTAPI发送
console.log（this.state）；
}
返回(
标签1：


标签2：


日期1:


说明：
//...
发送
);
}
}
你看到我的答案了吗？但是event.target.id也会返回id值，那么使用另一个属性“name”的目的是什么呢？设置状态的建议非常有用，因为我正在考虑设置变量