javascript - Single onChange function for multiple input fields is not working: ReactJS - Stack Overflow

admin管理员组

文章数量:1401673

Code:

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: '', panyYear: '', 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="panyYear" onChange={this.handleChange.bind(this, 'panyYear')} />
                <Input name="interval" onChange={this.handleChange.bind(this, 'panyYear')} />
                <Input name="timeRange" onChange={this.handleChange.bind(this, 'panyYear')} />
                <Input name="databasePort" onChange={this.handleChange.bind(this, 'panyYear')} />
                <Input name="databaseUserName" onChange={this.handleChange.bind(this, 'panyYear')} />
                <Input name="databasePassword" onChange={this.handleChange.bind(this, 'panyYear')} />

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

Main problem with this.setState function, I'm not understand why it is not working. I'm trying to set each state value on "onChange" of input field, "setState" is not working properly, when i'm console all states after given values, it returns blank values, any one help me?

Code:

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: '', panyYear: '', 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="panyYear" onChange={this.handleChange.bind(this, 'panyYear')} />
                <Input name="interval" onChange={this.handleChange.bind(this, 'panyYear')} />
                <Input name="timeRange" onChange={this.handleChange.bind(this, 'panyYear')} />
                <Input name="databasePort" onChange={this.handleChange.bind(this, 'panyYear')} />
                <Input name="databaseUserName" onChange={this.handleChange.bind(this, 'panyYear')} />
                <Input name="databasePassword" onChange={this.handleChange.bind(this, 'panyYear')} />

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

Main problem with this.setState function, I'm not understand why it is not working. I'm trying to set each state value on "onChange" of input field, "setState" is not working properly, when i'm console all states after given values, it returns blank values, any one help me?

• javascript
• reactjs

Share Improve this question Follow edited Feb 2, 2018 at 7:06 Mayank Shukla 105k1919 gold badges162162 silver badges145145 bronze badges asked Jun 16, 2017 at 8:36 Avijit DuttaAvijit Dutta 3,88133 gold badges1515 silver badges1616 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Basic Idea:

You need to use Computed property name concept, to use the expressions for object property names. For that you have to put the expression inside [].

---

Solution:

You are passing the state variable name in onChange function, so you need to use [] because it will be a variable that will hold some state variable name, then only it will update that state variable.

If you don't use [] then, stateName will be treated as a key (string), it will create a new state variable with name stateName and put the value in that.

Write it like this:

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

Check this:

let obj = {b: 5};

let a = 'b';

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

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

console.log(obj);

As mentioned above the Computed property name is the key to this solution. This solution worked well for me.

constructor() {
  super(props);
  this.state = {tallyPort: '', panyYear: '', 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="panyYear" 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>
    );
}

I hope this solution helps. Thanks.

本文标签： javascriptSingle onChange function for multiple input fields is not working ReactJSStack Overflow