多个输入字段的单个onChange函数不起作用：ReactJS

Question

码：

import React, { Component } from 'react';
import { Button, Input, Row, Col, Label } from 'reactstrap';

export default class  Settings extends Component {

    constructor(props) {
        super(props);
        this.state = { 
            tallyPort: '', companyYear: '', interval: '', timeRange: '', 
            databasePort: '', databaseUserName: '', databasePassword: '' 
        };  
    }

    handleChange = (stateName, e) => {
        this.setState({ stateName: e.target.value });
    }

    handleSave = () => {
        console.log(this.state)
    }

    render() {
        return(
            <div className="dashboard" >
                <Input name="tallyPort" onChange={this.handleChange.bind(this, 'tallyPort')}  />
                <Input name="companyYear" onChange={this.handleChange.bind(this, 'companyYear')} />
                <Input name="interval" onChange={this.handleChange.bind(this, 'companyYear')} />
                <Input name="timeRange" onChange={this.handleChange.bind(this, 'companyYear')} />
                <Input name="databasePort" onChange={this.handleChange.bind(this, 'companyYear')} />
                <Input name="databaseUserName" onChange={this.handleChange.bind(this, 'companyYear')} />
                <Input name="databasePassword" onChange={this.handleChange.bind(this, 'companyYear')} />

                <Button style={{ width: '200px', marginLeft: '720px'}} onClick={this.handleSave.bind(this)} color="primary">Save</Button>
            </div>
        );
    }
}

this.setState功能的主要问题，我不明白为什么它不起作用。我正在尝试在"onChange"输入字段上设置每个状态值，"setState"无法正常工作，当我在给定值后控制台所有状态时，它返回空值，有人帮我吗？

Answer 1

基本思路：

您需要使用计算机属性名称概念，才能将表达式用于对象属性名称。为此，您必须将表达式放在里面[]。

解：

您正在函数中传递state变量名onChange，因此您需要使用[]它，因为它将是一个拥有某些state变量名的变量，然后只有它会更新该state变量。

如果不使用[]，stateName则将被视为键（字符串），它将创建一个state具有名称的新变量stateName并将其值放入其中。

像这样写：

handleChange(stateName, e) {
    this.setState({ [stateName]: e.target.value });
}

检查一下：

handleChange(stateName, e) {
    this.setState({ [stateName]: e.target.value });
}