在click事件中检索div的value属性

薄荷

我的目标是获取div的value和id属性。该ID正在工作,但我无法获得工作所需的价值。我试过了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>

戴龙

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

顺便说一句,出于可访问性原因,您不应该使可点击div成为可能。您应该使用样式按钮或锚标记。至少将aria属性role =“ button”添加到div中。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章