javascript - 在 react 中通过他们的名字获取变量

Question

我需要将输入元素的值分配给一个变量，我的表单包含 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>
        );
    }
}

对此的任何建议都会有所帮助。

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