如何在内部input元素获焦时为父div添加box-shadow效果

核心思路 #

• 用状态精准控制父元素的阴影样式，仅当内部input元素获焦时添加阴影
• 点击增减按钮时，手动保持input的焦点状态，避免触发blur事件导致阴影消失

代码实现（React示例） #

1. 组件逻辑与结构 #

import { useState, useRef } from 'react';

const CustomNumberInput = ({ onChange, value }) => {
  const [isInputFocused, setIsInputFocused] = useState(false);
  const inputRef = useRef(null);

  // 递增处理：点击后保持input焦点
  const handleIncrement = (e) => {
    e.preventDefault();
    onChange?.(value + 1);
    inputRef.current?.focus();
  };

  // 递减处理：点击后保持input焦点
  const handleDecrement = (e) => {
    e.preventDefault();
    onChange?.(value - 1);
    inputRef.current?.focus();
  };

  return (
    <div className={`parent ${isInputFocused ? 'has-shadow' : ''}`}>
      <input
        ref={inputRef}
        type="number"
        value={value}
        onChange={(e) => onChange?.(Number(e.target.value))}
        onFocus={() => setIsInputFocused(true)}
        onBlur={() => setIsInputFocused(false)}
      />
      <div className="arrow-btns">
        <button onClick={handleIncrement}>↑</button>
        <button onClick={handleDecrement}>↓</button>
      </div>
    </div>
  );
};

export default CustomNumberInput;

2. 配套CSS样式 #

.parent {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: box-shadow 0.2s ease;
}

.parent.has-shadow {
  box-shadow: 0 0 6px rgba(45, 140, 240, 0.4);
}

.arrow-btns {
  display: flex;
  flex-direction: column;
  margin-left: 8px;
}

.arrow-btns button {
  border: none;
  background: #f5f5f5;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 2px;
}

.arrow-btns button:hover {
  background: #eee;
}

关键说明 #

• 通过useRef获取input元素引用，点击增减按钮后调用focus()强制input保持焦点，避免触发blur事件移除阴影
• 用isInputFocused状态精准控制父元素阴影，仅在input主动获焦时生效
• 按钮点击时调用e.preventDefault()，规避浏览器默认行为对焦点状态的干扰

内容的提问来源于stack exchange，提问作者amit singh