0

Essa função está dando erro dizendo que o event é null

evento:

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>
2
  • se pode mostrar o estado inicial que você criou?
    – novic
    12/10/2020 às 14:12
  • Testa onChange={this.handleChange.bind(this)}>
    – Sergio
    12/10/2020 às 14:14

1 Resposta 1

0

Quando se vai alterar um objeto contido no estado de um componente em eu particularmente gosto de separar as atribuições para não ter o problema de confundir aquilo que é para ser alterado, e os <input> coloca-se a propriedade name com o nome da mesma chave a ser alterado, e ai o handleChange vai ser útil pelo fator dinâmico em seu código, observe que o código de alteração fica muito mais simples fazendo assim:

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>

e nesse exemplo coloquei mais uma chave para que você entenda que agora o método vai servir de alteração para outras caixas de texto, sempre lembrando de adicionar o name no <input>.

Daria para fazer do seu jeito: sim daria:

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>

5
  • 1
    MUITO OBRIGADO! 12/10/2020 às 14:33
  • Só uma ultima coisa, como faria para caso digitado nada ele não aceita-se e retornasse o nome anterior 12/10/2020 às 14:37
  • Não entendi a sua pergunta @NatãLopes?
    – novic
    12/10/2020 às 14:38
  • oq eu estou fazendo é o seguinte uma area de texto editável, porém ela não pode ser vazia, então caso o usuario apague tudo e de enter ele não pode aceitar e voltar com o conteudo anterior 12/10/2020 às 14:45
  • Isso é um regra sua, voltar o conteúdo anterior se vai ter fazer outra rotina no seu código para verificar isso quando perder o foco. ai precisa abrir outro questionamento, cada questão resolve um determinado problema. OK
    – novic
    12/10/2020 às 14:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .