我的目标是获取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] 删除。
我来说两句