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

Question

我的目标是获取 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")

);

Answer 1

div 没有 value 属性。您可能可以使用 getAttribute 检索它，但有一个更简单的解决方案。更改value={option.value} onClick={(e, value) => handleClick(e, value)}为onClick={(e) => handleClick(e, option.value)}另一方面，出于可访问性的原因，您不应该制作可点击的 div。您应该使用样式按钮或锚标记。至少将 aria 属性 role="button" 添加到 div 中。

Answer 2

将点击事件更改为：onClick={(e,&nbsp;value)&nbsp;=>&nbsp;handleClick(e,&nbsp;option.value)}