0
237
ViewsReaccionar: cómo activar el enfoque en el elemento principal cuando el elemento secundario se está enfocando
Esta es mi barra de búsqueda actual
Lo que quiero hacer es, cuando enfoco <InputBase> , ayudará a activar el enfoque en
<div className={classes.search} ref={refSearchBar}></div> , y haga los cambios de sombra de cuadro como se muestra a continuación:
Intenté usar UseRef , pero parece que no funciona.
SearchBar.js
import React, { useRef } from "react"; import { makeStyles } from "@material-ui/core/styles"; import InputBase from "@material-ui/core/InputBase"; import SearchIcon from "@material-ui/icons/Search"; const useStyles = makeStyles((theme) => ({ search: { position: "relative", borderRadius: theme.shape.borderRadius, padding: "0 0.5rem", width: "50%", border: "1px solid grey", "&:focus": { boxShadow: "0 0 0 1px blue, 0 0 0 4px blue" } }, })); export default function PrimarySearchAppBar(props) { const classes = useStyles(); const refSearchBar = useRef(null); return ( <div className={classes.search} ref={refSearchBar}> <div className={classes.searchIcon}> <SearchIcon /> </div> <InputBase placeholder="Search…" classes={{ root: classes.inputRoot, input: classes.inputInput }} inputProps={{ "aria-label": "search" }} style={{ width: "100%" }} onClick={() => { refSearchBar.current.focus(); }} /> </div> ); } CódigoSandbox
https://codesandbox.io/s/bold-monad-w4cxi?file=/src/SearchBar.jsx
2 answers
Answer question0
La pseudoclase :focus-within CSS coincide con un elemento si el elemento o cualquiera de sus descendientes están enfocados. En otras palabras, representa un elemento que a su vez coincide con la pseudoclase :focus o tiene un descendiente que coincide con :focus. (Esto incluye a los descendientes en los árboles de sombra).
— MDN
De este modo:
div { margin: 1em; padding: 1em; border: solid blue 3px; border-radius: 5px; } div:focus-within { box-shadow: 5px 5px 15px 5px #000000; } <div><input></div> <div><input></div>0
En su lugar, puede agregar un ícono de entrada usando startAdornment startAdornment de InputBase
Debido a que la pseudoclase de focus solo está disponible en la entrada, deberá aplicarla a la entrada.
Algo como esto:
<InputBase startAdornment={<SearchIcon />} placeholder="Search…" classes={{ adornedStart: classes.searchIcon, root: classes.inputRoot, input: classes.inputInput, }} inputProps={{ "aria-label": "search" }} style={{ width: "100%" }} />;Ejemplo de trabajo:
