我在 JavaScript/ReactJS 中遇到问题

Question

I am working in ReactJS on post API. I have given a task to create some text fields in which I have to give some values and then on click of a submit button the information from text field will be submitted to POST API which I have taken from JasonPlaceHolder.

I have written a code which is given at last. Whenever I click Register button the value in last input field (which in my case is "EMAIL") overrides the values of all the input fields.

A screenshot of my problem is also attached:

Code

import React from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';


class App extends React.Component {

  constructor(props){
    super(props);
    this.state = {
          error: null,
          isLoaded: false,
          items: [],
          inter:0,
          ID: '',
          Name: '',
          username : '',
          Email: ''
        };
this.updateInput = this.updateInput.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
  }
  updateInput(event){
    this.setState({ID : event.target.value})
    this.setState({Name : event.target.value})
    this.setState({username : event.target.value})
    this.setState({Email : event.target.value}) 
    }
  handleSubmit(){
    var dict = { id: this.state.ID, name:this.state.Name , username: this.state.username , email: this.state.Email };

    axios.post('https://jsonplaceholder.typicode.com/users', dict)
    .then(response => {
      console.log(response)
      this.setState({isLoaded:true,
                      flag:1,
                    })
    })
    .catch(error => {
      alert(error);
      console.log(error);
    })
    }

  render() {

    const { error, isLoaded, items } = this.state;

    if (this.state.inter == 0){

      return(
      <div>

<form>    
    <p>ID:<input type="text" name="ID" onChange={this.updateInput}/> </p>
    <p>Name:<input type="text" name="name" onChange={this.updateInput} /> </p>
    <p>User Name:<input type="text" name="username" onChange={this.updateInput} /></p>
    <p>Email: <input type="text" name="email" onChange={this.updateInput} /></p> 
</form> 


  
      <button onClick={this.handleSubmit}>
      Register
      </button>

      </div>
      );
 

    }else{

      return(

      <div>
      <button onClick={this.handleSubmit} >
      Register
      </button>

      <h1> Post Request Submitted Successfully</h1>


      </div>

      );
    }

  }

  componentDidMount() {

    }
}

export default App;
    

Answer 1

You have to update the fields like this,

updateInput({target: {name, value}}){
    this.setState({[name]: value});
  }

Answer 2

Change you updateInput logic to this.

updateInput(event){
  this.setState({[event.target.name] : event.target.value})
}

Answer 3

The issue is in the updateInput method. change it to.

const { name, value } = event.target;
this.setState(state => ({
  ...state, [name]: value,
}));

N:B You will have to make the names of the input element same as the state field.

Answer 4

Your updateInput method overrides all the other fields, that's why the last updated field (the email) is the one you are seeing on the request payload. To solve this you can separate the updateInput method for each input field or inside updateInput check which field you're currently updating and update only that field.

You can check here for more details:

https://medium.com/@zacjones/handle-multiple-inputs-in-react-with-es6-computed-property-name-e3d41861ae46

Answer 5

I am working in ReactJS on post API. I have given a task to create some text fields in which I have to give some values and then on click of a submit button the information from text field will be submitted to POST API which I have taken from JasonPlaceHolder.

I have written a code which is given at last. Whenever I click Register button the value in last input field (which in my case is "EMAIL") overrides the values of all the input fields.

A screenshot of my problem is also attached:

Code

import React from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';


class App extends React.Component {

  constructor(props){
    super(props);
    this.state = {
          error: null,
          isLoaded: false,
          items: [],
          inter:0,
          ID: '',
          Name: '',
          username : '',
          Email: ''
        };
this.updateInput = this.updateInput.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
  }
  updateInput(event){
    this.setState({ID : event.target.value})
    this.setState({Name : event.target.value})
    this.setState({username : event.target.value})
    this.setState({Email : event.target.value}) 
    }
  handleSubmit(){
    var dict = { id: this.state.ID, name:this.state.Name , username: this.state.username , email: this.state.Email };

    axios.post('https://jsonplaceholder.typicode.com/users', dict)
    .then(response => {
      console.log(response)
      this.setState({isLoaded:true,
                      flag:1,
                    })
    })
    .catch(error => {
      alert(error);
      console.log(error);
    })
    }

  render() {

    const { error, isLoaded, items } = this.state;

    if (this.state.inter == 0){

      return(
      <div>

<form>    
    <p>ID:<input type="text" name="ID" onChange={this.updateInput}/> </p>
    <p>Name:<input type="text" name="name" onChange={this.updateInput} /> </p>
    <p>User Name:<input type="text" name="username" onChange={this.updateInput} /></p>
    <p>Email: <input type="text" name="email" onChange={this.updateInput} /></p> 
</form> 


  
      <button onClick={this.handleSubmit}>
      Register
      </button>

      </div>
      );
 

    }else{

      return(

      <div>
      <button onClick={this.handleSubmit} >
      Register
      </button>

      <h1> Post Request Submitted Successfully</h1>


      </div>

      );
    }

  }

  componentDidMount() {

    }
}

export default App;