Quiero obtener el valor de la entrada de TextField y mostrar el mensaje de forma condicional. Probé este, funciona pero este funciona dinámicamente porque usé onChange . Quiero lograr lo mismo pero usando onSubmit en <Button> ¿Hay alguna forma de hacerlo?
import React from 'react'; import { Component } from 'react'; import Button from '@mui/material/Button'; import { TextField } from '@mui/material'; class App extends Component { state = { myValue: null, } handleChange = (e) => this.setState({ myValue: e.target.value }) render() { return ( <div> <TextField value={this.state.myValue} onSubmit={this.handleChange} /> <button >Get Weather</button> {this.state.myValue ? <p>value inputed </p>: <p>no input</p>} </div> ) } } export default App;solo necesitas onkeydown en lugar de onsubmit.
<TextField value={this.state.myValue} onKeyDown={this.handleChange} />o usar
<form onSubmit={handleChange }> <TextField value={this.state.myValue} onKeyDown={this.handleChange} /> <button type="submit">submit</button> </form>Usar Refs es lo que necesitas. Puede obtener el valor actual de su entrada haciendo clic en un botón y solo luego cambiar el estado.
import React, { createRef } from "react"; import { Component } from "react"; import { TextField } from "@mui/material"; class App extends Component { constructor(props) { super(props); this.textInput = createRef(); this.state = { myValue: "" }; } showRefContent = () => { this.setState({ myValue: this.textInput.current.value }); }; handleChange = (e) => this.setState({ myValue: e.target.value }); render() { return ( <div> <TextField inputRef={this.textInput} /> <button onClick={this.showRefContent}>Get Weather</button> <p> {this.state.myValue.length > 0 ? `text:${this.state.myValue}` : "no text"} </p> </div> ); } } export default App;