javascript - 在点击事件中获取 div 的 value 属性

Question

我的目标是获取 div 的 value 和 id 属性。 id 正在工作，但我无法获得工作的值(value)。我试过 event.target.value 但它仍然返回未定义。我应该单独传递属性还是附加到 event？

// hooks
const {useState} = React;

const OPTIONS =  [
        {id: 0, value: '00:00', display: 'Midnight', period: null},
        {id: 1, value: '00:30', display: '12:30', period: 'AM'},
        {id: 2, value: '01:00', display: '1:00', period: 'AM'},
        {id: 3, value: '01:30', display: '1:30', period: 'AM'},
        {id: 4, value: '02:00', display: '2:00', period: 'AM'},
        {id: 5, value: '02:30', display: '2:30', period: 'AM'},
        {id: 6, value: '03:00', display: '3:00', period: 'AM'},
        {id: 7, value: '03:30', display: '3:30', period: 'AM'},
        {id: 8, value: '04:00', display: '4:00', period: 'AM'},
        {id: 9, value: '04:30', display: '4:30', period: 'AM'},
        {id: 10, value: '05:00', display: '5:00', period: 'AM'},
        {id: 11, value: '05:30', display: '5:30', period: 'AM'},
        {id: 12, value: '06:00', display: '6:30', period: 'AM'},
    ]

function TimeInput(props){
    function handleClick(event, value){
      console.log(event.target.value)
      props.onClick(Number(event.target.id), value);
    };
    const timeMarkup = OPTIONS.map(option => 
      <div 
        className={ props.value === option.id ? 'button selected' : 'button' }
        id={option.id}
        value={option.value}
        onClick={(e, value) => handleClick(e, value)}
      >
          {option.display} {option.period}
      </div>
    );
    return (
        <div className='time-container'>{timeMarkup}</div>
    );
};

function App(){
  const [selectedId, setSelectedId] = useState('');
  const [value, setValue] = useState('');
  function handleClick(id, value){
    setSelectedId(id);
    setValue(value)
  }
  return (
    <div>
      <p>Id: {selectedId} Value: {value}</p>
      <TimeInput value={selectedId} onClick={handleClick}/>
    </div>
  );
};

// Render
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

.time-container {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 10px 0 10px 0;
}

.button {
  cursor: pointer;
  background-color: #66bb6a;
  border-radius: 25px;
  margin: 0 2px 0 0;
  text-align: center;
  color: white;
  font-weight: 600;
  height: 20px;
  padding: 3px;
  white-space: nowrap;
}

.button:hover {
  background-color: #8ce291;
  color: black;
}

.selected {
  pointer-events: none;
  background-color: #002e03;
}

<div id="react"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

Answer 1

div 没有值属性。您可能可以使用 getAttribute 检索它，但有一个更简单的解决方案。将 value={option.value} onClick={(e, value) => handleClick(e, value)} 更改为 onClick={(e) => handleClick(e, option.值)}

另一方面，出于可访问性原因，您不应该制作可点击的 div。您应该使用带样式的按钮或 anchor 标记。至少将 aria 属性 role="button"添加到 div。