Estoy tratando de implementar un caso de uso muy simple, una función de interfaz de usuario, donde:
Finalmente pude obtener todo correcto (de hecho, con un backend de MongoBD, redux, etc.), y lo único que nunca pude hacer (pagar un día completo en Google y leer publicaciones similares de SOF) fue esto:
Cuando aparece mi entrada de texto, ¡no puedo transferirle el foco! Primero me cansé de esta manera:
<div className={((this.state.toggleWordEdit) ? '' : 'hidden')}> <input id={this.props.word._id} className="form-control" ref="updateTheWord" defaultValue={this.state.word} onChange={this.handleChange} onKeyPress={this.handleSubmit} autoFocus={this.state.toggleWordEdit}/></div> <div className={((this.state.toggleWordEdit) ? 'hidden' : '')}> <h3 onClick={this.updateWord}> {this.state.word}</h3> </div>pero autoFocus seguro que no funcionó (supongo que porque el formulario se procesa, pero en estado oculto, lo que hace que autoFocus sea inútil).
Luego probé en mi this.updateWor, muchas de las sugerencias que encontré en google y SOF:
this.refs.updateTheWord.focus();que junto con sugerencias similares no funcionaron. ¡También traté de engañar a React solo para ver si podía hacer algo! Usé DOM real:
const x = document.getElementById(this.props.word._id); x.focus();y tampoco funcionó. Una cosa que ni siquiera pude entender para poner en palabras es una sugerencia como esta: tener ref como método (supongo) Ni siquiera lo probé porque tengo múltiplos de estos componentes y necesito ref para obtener más valor de, por componente, y no podía imaginar si mi ref no se nombra, ¿cómo podría obtener el valor de!
Entonces, ¿podría darme una idea, ayudándome a comprender que, en caso de que no esté usando un formulario (porque necesito un solo cuadro de entrada que reemplace una etiqueta), cómo podría establecer su enfoque cuando su clase CSS (Bootstrap) está perdiendo ' oculto' por favor?
La forma en que ha utilizado las referencias no es la forma preferida o ya no es la mejor práctica. prueba algo como esto
class MyClass extends React.Component { constructor(props) { super(props); this.focus = this.focus.bind(this); } focus() { this.textInput.current.focus(); } render() { return ( <div> <input type="text" ref={(input) => { this.textInput = input; }} /> <input type="button" value="Set Focus" onClick={this.focus} /> </div> ); } } Actualizar
Desde React 16.3 en adelante, puede usar la API 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> <input type="text" ref={this.textInput} /> <input type="button" value="Set Focus" onClick={this.focus} /> </div> ); } }Simplemente agregue el atributo de enfoque automático a la input . ( por supuesto en JSX es autoFocus )
<input autoFocus ... // General Focus Hook const useFocus = (initialFocus = false, id = "") => { const [focus, setFocus] = useState(initialFocus) const setFocusWithTrueDefault = (param) => setFocus(isBoolean(param)? param : true) return ([ setFocusWithTrueDefault, { autoFocus: focus, key: `${id}${focus}`, onFocus: () => setFocus(true), onBlur: () => setFocus(false), }, ]) } const FocusDemo = () => { const [labelStr, setLabelStr] = useState("Your initial Value") const [setFocus, focusProps] = useFocus(true) return ( <> {/* React.Fragment */} <input onChange={(e)=> setLabelStr(e.target.value)} value={labelStr} {...focusProps} /> <h3 onClick={setFocus}>{labelStr}</h3> </> ) }Para una demostración más completa , haga clic aquí .