我的目標是獲取 div 的 value 和 id 屬性。id 正在工作,但我無法獲得工作的值。我已經嘗試過event.target.value,但它仍然返回未定義。我應該單獨傳遞該屬性還是將其附加到event?// hooksconst {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> );};// RenderReactDOM.render( <App />, document.getElementById("react"));
在點擊事件中獲取div的value屬性
慕森卡
2023-11-02 21:29:52