onChange on React not working!

Asked

Viewed 401 times

0

This function is giving error saying that the event is null

event:

handleChange(event) {
    this.setState(prevState => ({
        equipe: {
            ...prevState.equipe,
            nome: event.target.value
        }
    }))
}

input:

<input className={classes.titulo} type='text' 
  value={this.state.equipe.nome} 
  onChange={this.handleChange}>
</input>
  • can be displayed the initial state you created?

  • Forehead onChange={this.handleChange.bind(this)}>

1 answer

0


When to change an object contained in the state of a component in I particularly like to separate the assignments so as not to have the problem of confusing what is to be changed, and the <input> place the property name with the name of the same key being changed, and there the handleChange will be useful by the dynamic factor in your code, note that the change code becomes much simpler doing so:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      equipe: {
        nome: '',
        idade: 0
      }
    }
    this.handleChange = 
      this.handleChange.bind(this);
  }
  handleChange(e) {
    let state = this.state;
    state.equipe[e.target.name]= e.target.value
    this.setState(state);
  }
  render() {
    return (
      <div>
        <div>{JSON.stringify(this.state)}</div>
        <input type="text"
          name="nome"
          value={this.state.equipe.nome} 
          onChange={this.handleChange} />
        <input type="text"
          name="idade"
          value={this.state.equipe.idade} 
          onChange={this.handleChange} />
      </div>
    )
  }
}
ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>

and in this example I put another key so that you understand that now the method will serve as a change to other text boxes, always remembering to add the name in <input>.

You could do it your way:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      equipe: {
        nome: '',
        idade: 0
      }
    }
    this.handleChange = 
      this.handleChange.bind(this);
  }
  handleChange(e) {     
    const inputChange = {[e.target.name]: e.target.value};    
    this.setState(state => ({
      equipe: {
        ...state.equipe,
        ...inputChange
      }
    }))
  }
  render() {
    return (
      <div>
        <div>{JSON.stringify(this.state)}</div>
        <input type="text"
          name="nome"
          value={this.state.equipe.nome} 
          onChange={this.handleChange} />
        <input type="text"
          name="idade"
          value={this.state.equipe.idade} 
          onChange={this.handleChange} />
      </div>
    )
  }
}
ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>

  • 1

    THANK YOU VERY MUCH!

  • Just one last thing, as it would for typed case nothing it does not accept itself and return the previous name

  • I don’t understand your question @Natãlopes?

  • what I am doing is the following an editable text area, but it cannot be empty, so if the user deletes everything and enter he cannot accept and return with the previous content

  • This is your rule, go back to the previous content if you will have to do another routine in your code to check this when you lose focus. Each question solves a particular problem. OK

Browser other questions tagged

You are not signed in. Login or sign up in order to post.