Estoy tratando de usar setState para actualizar una matriz de estado en React usando una entrada HTML básica. El estado que estoy tratando de actualizar se ve así:
"businessName": "", "grossAnnualSales": 0, "contactEmail": "", "numEmployees": 0, "annualPayroll": 0, "locations": [{"zip": ""}], "industryId": "",Necesito agregar un código postal ingresado por el usuario en un componente React a este objeto en la matriz.
Hasta ahora he intentado esto y no funciona, solo se actualiza a una cadena y no a una matriz:
updateZip(){ return e => this.setState({"locations": [{"zip": e.currentTarget.value}]})}
El componente Reaccionar:
<input onChange={this.updateZip()} type="text" className="zip-input"/>¿Cómo puedo actualizar el estado con éxito?
use e.target.value y pase onChange={this.updateZip}
class App extends Component { state = { locations: [{ zip: "" }] }; updateZip = (e) => { this.setState({ locations: [{ zip: e.target.value }] }); }; render() { return ( <div> <input onChange={this.updateZip} type="text" className="zip-input" /> <p>{this.state.locations[0].zip}</p> </div> ); } } export default App;Intente reemplazar su función updateZip con una función de flecha.
updateZip = (e) => { return e => this.setState({"locations": [{"zip": e.currentTarget.value}]}) }También
<input onChange={(e) => this.updateZip(e)} type="text" className="zip-input"/>