¿Cómo puedo usar el valor del estado x en la función handleClick para mostrar una alerta del valor de entrada en el estado x usando el componente Función?
import React, { useState } from "react"; import "./App.css"; function About() { const [state, setState] = useState({ x: "", output: [], }); //for onChange Event const handleChnage = (e) => { setState({ ...state, [state.x]: e.target.value }); console.log(e.target.value); }; //for onClick Event const handleClick = () => { alert(state.x); }; return ( <> <h1>This is about about </h1> <input placeholder="Enter a number" value={setState.x} onChange={handleChnage} /> <button onClick={handleClick}>get Table</button> </> ); } export default About;Debería ser x en lugar de state.x
const handleChnage = (e) => { setState({ ...state, x: e.target.value }) } y el valor debería ser state.x aquí en lugar de setState.x :
<input placeholder="Enter a number" value={state.x} onChange={handleChnage} />Recuerde en los ganchos, el primer parámetro es el valor, el segundo parámetro es la función de establecimiento.
Se deben solucionar dos problemas:
[state.x] , debería ser solo x . setState({ ...state, x: e.target.value });state.x no setState.x <input placeholder="Enter a number" value={state.x} onChange={handleChnage} /> function About() { const [state, setState] = React.useState({ x: "", output: [] }); //for onChange Event const handleChnage = (e) => { setState({ ...state, x: e.target.value }); console.log(e.target.value); }; //for onClick Event const handleClick = () => { alert(state.x); }; return ( <React.Fragment> <h1>This is about about </h1> <input placeholder="Enter a number" value={state.x} onChange={handleChnage} /> <button onClick={handleClick}>get Table</button> </React.Fragment> ); } ReactDOM.render(<About />, document.querySelector('.react')); <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>