Empecé a aprender a reaccionar, pero me quedé estancado aquí. Quiero imprimir el valor en la página web, pero no puedo obtener qué método debo poner en Cambio y también necesito una explicación.
class IncrementDecrement extends React.Component { constructor(props) { super(props); this.state = { a: 0 }; this.change = this.onIncreased.bind(this); this.change = this.onDecreased.bind(this); } change(event) { this.setState({ a: event.target.value }); } onIncreased() { this.state.a = this.state.a + 1; console.log(this.state.a); } onDecreased() { this.state.a = this.state.a - 1; console.log(this.state.a); } render() { return ( <div> <input type="number" value={this.state.a} onChange={this.setState} /> <button onClick={() => { this.onIncreased(); }} > Increment </button> <button onClick={() => { this.onDecreased(); }} > Decrement </button> </div> ); } } ReactDOM.render(<IncrementDecrement />, document.getElementById("root")); <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="root"></div>cambiar esta linea
<input type="number" value={this.state.a} onChange={this.setState} />a
<input type="number" value={this.state.a} onChange={this.change} /> this.change es un controlador para el evento onChange que toma el valor y actualiza el estado.
Intente configurar onChange={this.change} . Tiene este método definido pero no lo está usando, sino que pasa setState como si fuera un controlador de eventos, que no lo es.
Realice los siguientes cambios:
Enlace los métodos correctamente en el constructor.
Establezca onChange en this.change y no this.setState .
Para actualizar una parte del estado, use this.setState y no cambie el estado.
Y en el método de change , coaccione el valor de la entrada a un Number para que las operaciones de incremento y decremento funcionen correctamente.
class IncrementDecrement extends React.Component { constructor(props) { super(props); this.state = { a: 0 }; this.change = this.change.bind(this); this.onIncreased = this.onIncreased.bind(this); this.onDecreased = this.onDecreased.bind(this); } change(event) { this.setState({ a: Number(event.target.value) }); } onIncreased() { this.setState({ a: this.state.a + 1 }); } onDecreased() { this.setState({ a: this.state.a - 1 }); } render() { return ( <div> <input type="number" value={this.state.a} onChange={this.change} /> <button onClick={() => { this.onIncreased(); }} > Increment </button> <button onClick={() => { this.onDecreased(); }} > Decrement </button> </div> ); } } ReactDOM.render(<IncrementDecrement />, document.getElementById("root")); <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="root"></div>