Quando se vai alterar um objeto contido no estado de um componente em react 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>
onChange={this.handleChange.bind(this)}>