Me enfrento a un error extraño. Estoy tratando de enfocar mi elemento de entrada cuando hago clic en el botón pero eso no enfoca mi entrada.
Intenté usar useRef de gancho de reacción y luego usarlo en mi inputRef.
const inputRef = useRef<HTMLInputElement>(null); <InputBase inputRef={inputRef} value={search} placeholder="Search" onChange={onSearch} onKeyPress={onSearchQuery} /> <Button variant="text" onClick={() => { inputRef.current?.focus(); onOpen(); }} > Focus my input </Button>Usa React.createRef()
class MyClass extends React.Component { constructor(props) { super(props); // create a ref to store the textInput DOM element this.textInput = React.createRef(); this.focus = this.focus.bind(this); } focus() { // Explicitly focus the text input using the raw DOM API // Note: we're accessing "current" to get the DOM node this.textInput.current.focus(); } render() { // tell React that we want to associate the <input> ref // with the `textInput` that we created in the constructor return ( <div> <InputBase ref={this.textInput} value={search} placeholder="Search" onChange={onSearch} onKeyPress={onSearchQuery} /> <Button variant="text" onClick={this.focus} > Focus my input </Button> </div> ); } }