当输入集中在React中时，我想改变样式

Question

const [title, setTitle] = useState('');
const [isInput, setIsInput] = useState(false);
const inputRef = useRef(null);
const clickHandler = () => {
if (inputRef.current) {
setIsInput(true);
} else {

}
};
const changeHandler = (e) => {
setTitle(e.target.value);
};
return (
<header className={classes.header}>
<div className={classes.search}>
<GoSearch
className={classes.searchIcon}
style={{ color: isInput ? 'white' : '#cccccc' }}
/>
<input
ref={inputRef}
className={classes.searchInput}
onClick={clickHandler}
onChange={changeHandler}
/>
</div>
</header>
);

我想改变样式(白色)时，输入是集中在React

当输入不聚焦时，我想应用现有的样式(#cccccc)

Answer 1

可以使用CSS focus来设置。

.searchIcon {
color: #cccccc;
}
.searchInput:focus .searchIcon {
color: white;
}