javascript - 多个输入字段的单个 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

基本思想:

您需要使用 Computed property name概念，使用对象属性名称的表达式。为此，您必须将表达式放在 [] 中。

---

解决方法:

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

如果你不使用[]那么，stateName会被当作一个键(字符串)，它会创建一个新的state 名称为 stateName 的变量，并将值放入其中。

这样写:

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

检查这个:

let obj = {b: 5};

let a = 'b';

obj = {...obj, a: 20}; //similar to setState

obj = {...obj, [a]: 1};

console.log(obj);