0
92
ViewsValor de reacción que devuelve indefinido
Estoy tratando de recuperar un valor específico de mi campo de entrada en mi componente de reacción, pero está devolviendo indefinido, he intentado usar solo la referencia de usuario pero me ha dado el mismo resultado (devuelve indefinido, vea la imagen a continuación). Necesito obtener el nombres de los jugadores a los que puedo usar sus ID únicos como parte de una llamada API que no enumera a todos los jugadores, pero tengo un archivo JSON que contiene ambos, así que si puedo obtener sus nombres de la entrada que he creado puedo obtenga sus identificaciones y agréguelas a la API para hacer una llamada a la API. ¿Alguien puede ayudarme con esto? ¡Gracias!
import React from "react"; import Row from "react-bootstrap/Row"; import Col from "react-bootstrap/Col"; import "../playercompare.css"; import InputGroup from "react-bootstrap/InputGroup"; import FormControl from "react-bootstrap/FormControl"; import axios from "axios"; import "chart.js/auto"; import { Bar } from "react-chartjs-2"; import { Radar } from "react-chartjs-2"; import getPlayerId from "../Players.js"; import { useState, useEffect, useRef } from "react"; import players from "../Players.js"; const Playercompare = () => { // let axiosurl= 'https://statsapi.web.nhl.com/api/v1/people/' +id; const playerOneInput = useRef(null); const playerTwoInput = useRef(null); const [playerOneName, setPlayerOneName] = useState("Choose player name"); const [playerTwoName, setPlayerTwoName] = useState("Choose player name"); function playerOneId() { let playerOne = setPlayerOneName(playerOneInput.current.textValue); console.log(playerOne); console.log(players); for (let i = 0; i < players.length; i++) { if (playerOneInput.current.value == players[i].name) { } } } return ( <Row className="player-compare-row"> <Col className="col-12 col-lg-4 input-container" id="input"> <InputGroup className="mb-3 mt-4 input" ref={playerOneInput}> <FormControl placeholder={playerOneName} aria-label="Player Name" aria-describedby="basic-addon1" /> </InputGroup> <div className="button col-3" onClick={playerOneId}> <p>Hello</p> </div> </Col> <Col className="col-12 col-lg-4 offset-lg-4 input-container"> <InputGroup className="mb-3 mt-4 input" ref={playerTwoInput}> <FormControl placeholder={playerTwoName} aria-label="Player Name" aria-describedby="basic-addon1" /> </InputGroup> <div className=""></div> </Col> </Row> ); }; export default Playercompare;1 answers
Answer question0
Los controles de formulario de React-Bootstrap funcionan como cualquier <input> normal y se pueden controlar . No necesita usar referencias, solo estados
const [playerOneName, setPlayerOneName] = useState(""); // ... <InputGroup className="mb-3 mt-4 input"> <FormControl placeholder="Choose player name" aria-label="Player Name" aria-describedby="basic-addon1" value={playerOneName} onChange={e => setPlayerOneName(e.target.value)} /> </InputGroup> El <FormControl> ahora es un componente controlado, lo que significa que su valor se controla desde el estado y usa el evento de cambio para actualizar ese estado.
Ahora puede simplemente hacer referencia a playerOneName , etc. en cualquier controlador de eventos de botón o ganchos de efectos.
const handleClick = () => { console.log("You clicked the button"); console.log("playerOneName:", playerOneName, "playerTwoName:", playerTwoName); }; useEffect(() => { console.log("player name state changed"); console.log("playerOneName:", playerOneName, "playerTwoName:", playerTwoName); }, [ playerOneName, playerTwoName ]); // run effect when these changeAquí hay una demostración súper simple que muestra el componente controlado
