tengo este codigo:
import React, { Component } from "react"; export default class Safe extends Component { constructor(props) { super(props); this.state = { userInput: "", password: 1234 } } keyClicked = (evt) => { // HERE!! } render() { return ( <div className="safe"> <div className="display">{this.state.userInput}</div> <div className="keypad"> {Array.from({length: 9}, (x, key) => <button className="key" key={key++} onClick={this.keyClicked}>{key++}</button>)} </div> </div> ) } }Estoy intentando hacer una "caja fuerte" con un teclado numérico. Para abrir la caja fuerte, el usuario debe ingresar un código específico para "abrirla".
Actualmente, estoy trabajando para mostrar lo que el usuario ha ingresado a través del teclado numérico en la pantalla. Sin embargo, no estoy seguro de cómo obtener el número que el usuario ha ingresado a través del teclado numérico. He puesto un comentario que dice "¡¡AQUÍ!!" para mostrar dónde quiero acceder al número ingresado.
Intenté usar evt.target.value pero cuando intento console.log() el evt , aparece como una cadena vacía.
¡Cualquier ayuda es apreciada ya que soy nuevo en React!
Sí, puedes conseguir esto de esta manera.
import React, { Component } from "react"; export default class Safe extends Component { constructor(props) { super(props); this.state = { userInput: "", password: 1234 } } keyClicked = (evt) => { console.log(evt) } render() { return ( <div className="safe"> <div className="display">{this.state.userInput}</div> <div className="keypad"> {Array.from({length: 9}, (x, key) => <button className="key" key={key++} onClick={()=>this.keyClicked(key++)}>{key++}</button>)} </div> </div> ) } }Creo que para este caso es mejor usar map() . Y declarar la matriz de antemano. De esta forma, es posible pasar el número en el que se hizo clic como argumento al controlador de clics.
Prueba lo siguiente:
export default class Safe extends Component { constructor(props) { super(props); this.state = { userInput: "", password: 1234 }; } numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]; handleClick = (n) => { console.log(n) } render() { return ( <div className="safe"> <div className="display">{this.state.userInput}</div> <div className="keypad"> {this.numbers.map((number, i) => { return ( <button className="key" key={i} onClick={() => this.handleClick(number)} > {number} </button> ) })} </div> </div> ) } }