Tengo un campo de entrada dentro de un menú desplegable de selección. Necesito concentrarme en ese cuadro de entrada tan pronto como se muestre el menú desplegable cuando el usuario haga clic en él. Intenté usar referencias, pero eso no parece funcionar. Estoy usando antd 3.26.14 y React 16.8.6. Aquí está el código:
<Select labelInValue open={isOpenSelectCategory} onDropdownVisibleChange={onDropdownVisibleChange} placeholder="Select Category" onChange={() => { searchDropdownOptions('formCategories', ''); setCategoryInputValue(''); }} notFoundContent={null} dropdownRender={menu => ( <> <div onMouseDown={lockSelectCategoryClose} onMouseUp={lockSelectCategoryClose} style={{ marginBottom: '10px' }} > <Input value={categoryInputValue} ref={inputRef} onChange={event => { searchDropdownOptions( 'formCategories', event.target.value, ); setCategoryInputValue(event.target.value); }} placeholder="Search category or create new one" /> ...El efecto de uso para la referencia de entrada:
useEffect(() => { if (inputRef.current) inputRef.current.focus(); }, [inputRef]);Probé variaciones del useEffect anterior, donde en lugar de escuchar los cambios en inputRef, escuché el cambio cuando se carga el menú desplegable. Aunque ninguno de los dos funcionó.
Cualquier ayuda aquí será muy apreciada...
Intente usar ref={(input) => input && input.focus()} en combinación con la propiedad de autofocus , por ejemplo:
<Input autofocus ref={(input) => input && input.focus()} ... />Aquí hay un stackblitz de trabajo para un componente de clase de reacción.
NOTA: El problema con esta solución es que enfoca la entrada en cualquier renderizado (que podría no ser deseable).
Consulte también cómo configurar el enfoque en un campo de entrada después de la representación para obtener más opciones.
Código para el ejemplo completo vinculado:
import React, { useFocus } from 'react'; import ReactDOM from 'react-dom'; import 'antd/dist/antd.css'; import './index.css'; import { Select, Divider, Input } from 'antd'; import { PlusOutlined } from '@ant-design/icons'; const { Option } = Select; let index = 0; class App extends React.Component { state = { items: ['jack', 'lucy'], name: '', }; onNameChange = (event) => { this.setState({ name: event.target.value, }); }; addItem = () => { console.log('addItem'); const { items, name } = this.state; this.setState({ items: [...items, name || `New item ${index++}`], name: '', }); }; render() { // const [inputRef, setInputFocus] = useFocus(); const { items, name } = this.state; return ( <Select style={{ width: 240 }} placeholder="custom dropdown render" dropdownRender={(menu) => ( <div> {menu} <Divider style={{ margin: '4px 0' }} /> <div style={{ display: 'flex', flexWrap: 'nowrap', padding: 8 }}> <Input autofocus ref={(input) => input && input.focus()} style={{ flex: 'auto' }} value={name} onChange={this.onNameChange} /> <a style={{ flex: 'none', padding: '8px', display: 'block', cursor: 'pointer', }} onClick={this.addItem} > <PlusOutlined /> Add item </a> </div> </div> )} > {items.map((item) => ( <Option key={item}>{item}</Option> ))} </Select> ); } } ReactDOM.render(<App />, document.getElementById('container'));