Определить нажатый элемент и обновить значение aria-checked в React
render(){
return (
<div>
this.data.map(item=> {
<div aria-checked = "true/false">{item}<div>
})
</div>
)
}
Для приведенного выше кода я хочу написать обработчик onClick, который изменяет значение aria-checked на true, в зависимости от выбранного / нажатого элемента. Если выбран один элемент, это aria-checked будет true, а остальные - false.
Я знаю, что мне нужно состояние компонента checked с логическим типом, но я не уверен, как реализовать логику обработчика.
Ответы 1
вы можете сделать по setAttribute, здесь:
constructor() {
super();
this.data = ["hello", "world"];
}
handleClick = (e) => {
const currentAriaChecked = (e.currentTarget.getAttribute("aria-checked") === 'true');
e.currentTarget.setAttribute("aria-checked", !currentAriaChecked);
};
render() {
return (
<div>
{
this.data
.map(item => (<div aria-checked = "true" onClick = {this.handleClick}>{item}</div>))
}
</div>
);
}
Обновлено
используя машинописный текст и способ реагирования
render() {
return (
<div>
{
this.data
.map(item => (<Check>{item}</Check>))
}
</div>
);
}
ваш компонент check
state = {
isChecked: false
}
handleClick = (e) => {
this.setState((prevState,props) => {
return {isChecked: !prevState.isChecked }
})
};
render() {
return (
<div aria-checked = {this.state.isChecked} onClick = {this.handleClick}>
{this.props.children} {this.state.isChecked.toString()}
</div>
);
}
см. детская площадка.
есть ли более реактивный способ сделать это?
да, вы можете создать component для `aria-checked = " true "`, используя state внутри него для обработки функции переключения.
также машинописная ошибка во второй строке handleClick [ts] Argument of type 'boolean' is not assignable to parameter of type 'string' на !currentAriaChecked
Я думал, вы используете es6. вам нужно изменить на подходящий typescript
второй параметр в setAttribute принимает только строку. как я могу заставить его принимать логическое значение currentAriaChecked?
см. мое обновление для машинописного текста или проверьте stackblitz.com/edit/react-ts-alewk7?file=Check.tsx
Благодарю. но это не совсем то, что я искал. если у меня есть 2 div с aria-checked, я хочу иметь возможность выбрать один из div, переключите его aria-checked на true. снова, если я выберу другой div, я хочу, чтобы false был aria-checked предыдущего div, но установил его на true для текущего.
Это твоя очередь
Пожалуйста, предоставьте минимальный воспроизводимый пример. Вы должны показать класс компонента и конструктор. Также покажите, как инициализируется
this.data.