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概念，才能使用对象属性名称的表达式。为此，您必须将表达式放在[]。

中

<强>解决方案：

您正在state函数中传递onChange变量名称，因此您需要使用[]，因为它将是一个包含一些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);

Answer 2

如上所述，计算属性名称是此解决方案的关键。此解决方案对我来说效果很好。

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

// assigning the name and value is the main objective of this solution.
handleChange = (e) => {
  this.setState({
     [e.target.name]: e.target.value
  })
}

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

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

我希望此解决方案有帮助。谢谢。

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

2 个答案: