React自定义Time-picker如何实现点击input动态切换背景色

问题原因 #

你当前的实现是直接操作DOM修改单个输入框的背景色，没有记录全局激活的输入框标识，所以点击新输入框时无法主动重置上一个选中项的样式。且在React中直接操作DOM修改样式不符合状态驱动的设计思想，容易出现状态和视图不一致的问题。

修复方案 #

通过状态驱动视图渲染，直接用已有的状态判断输入框的高亮状态，无需手动操作DOM，修改后代码如下：

// 新增选中完整时间的状态
const [hours, setHours] = useState('09')
const [selectedFullTime, setSelectedFullTime] = useState('')

const onClickHours = (e) => {
  e.preventDefault();
  setHours(e.target.value)
}

const onClickFullTime = (e) => {
  e.preventDefault();
  const timeVal = e.target.value
  setFullTime(timeVal)
  setSelectedFullTime(timeVal)
  getTime(timeVal);
  // 移除原有的changeColor调用，该方法可以直接删除
}
  
const getTime= (fullTime) => {
  onSelectTime(fullTime)
}

const hoursArray = [];
for (let i = 9; i < 22; i++) {
  const formatI = i < 10 ? '0' + i : String(i);
  hoursArray.push(
    // 通过状态匹配动态设置背景色
    <input 
      key={formatI}  
      onClick={onClickHours} 
      value={formatI} 
      readOnly 
      style={{backgroundColor: hours === formatI ? '#40a9ff' : '#fff'}}
    />
  )
}

const fullTimeArray = [];
for(let j = 0; j < 60; j = j + 5){
  fullTimeArray.push(hours + ":" + (j< 10 ? '0' + j : j))
}

// 渲染部分
<div className="timepicker">
  <div className="hours">
    {hoursArray}
  </div>
  <div className="full-time">
    {
    fullTimeArray.map((time, index) => (
      // 通过状态匹配动态设置背景色，移除无用的data-color属性
      <input 
        name="fullTime" 
        key={index} 
        onClick={onClickFullTime} 
        value={time} 
        readOnly
        style={{backgroundColor: selectedFullTime === time ? '#40a9ff' : '#fff'}}
      />
      ))}
  </div>
</div>

修改后所有输入框的样式都会跟随状态自动更新，点击新选项时旧选项会自动恢复白色背景，无需额外的DOM操作逻辑。

内容的提问来源于stack exchange，提问作者Rabbi Musayev