state: State<T> = {
selectedItems: []
}
renderListItem: ({ item: T }) => T = ({ item }) => {
return item;
}const ChildComponent = (props) => (
<div
className={`childComponent ${props.isActive ? 'active' : ''}`}
onClick={props.onClick}
data-id={props.id}
>
<h3>{props.text}</h3>
</div>
);const ParentComponent = ({ items }) => {
const [ active, setActive ] = React.useState(null);
const onClick = e => setActive(+e.currentTarget.dataset.id);
// или
// const onClick = e => setActive(+e.target.closest('[data-id]').dataset.id);
return (
<div>
{items.map(n =>
<ChildComponent
key={n.id}
onClick={onClick}
isActive={n.id === active}
{...n}
/>
)}
</div>
)
};ReactDOM.render(
<ParentComponent
items={[
{ id: 69, text: 'hello, world!!' },
{ id: 187, text: 'fuck the world' },
{ id: 666, text: 'fuck everything' },
]}
/>,
document.getElementById('root')
);*-enter-active, *-leave-active и т.д. анимируются удаляемые/добавляемые элементы. Если key не изменился, элемент не будет удалён и заново добавлен, соответственно, и классы не будут добавляться.
<button value=" ---> <button data-value=".document.addEventListener('click', ({ target: { dataset: { value } } } ) => {
if (value) {
document.querySelector(`[name="size"][value="${value}"]`).click();
}
});const radios = [...document.querySelectorAll('[name="size"]')];
const buttons = [...document.querySelectorAll('button')];
// можно смотреть на значение data-атрибута
const onClick = e => radios.find(n => n.value === e.target.dataset.value).click();
// или, кликать радиокнопку с тем же индексом, что и у кнопки обычной
const onClick = e => radios[buttons.indexOf(e.target)].click();
buttons.forEach(n => n.addEventListener('click', onClick));<Body tmp={this.state.body.json.result} />{this.props.tmp.map(n => <div key={n._id}>{n.name}</div>)}<swiper @click="onClick"methods: {
onClick(e) {
const slide = e.target.closest('.swiper-slide');
if (slide) {
console.log(`slide ${slide.dataset.swiperSlideIndex} clicked`);
}
},return перед getSum(sum).
$('a').click(function(e) {
e.preventDefault();
$('html').animate({
scrollTop: $($(this).attr('href')).offset().top,
}, 500);
});$('#input4').attr('checked', true);checked предназначен для задания дефолтного состояния радиокнопки, вместо него следует использовать одноимённое свойство.<fgroup class="fg1"><div class="fgroup">.const $groups = $('.fgroup').on('change', function(e) {
$groups
.not(this)
.find(`input[value!="${e.target.value}"]`)
.prop('checked', true);
});const unique = (arr, keys) =>
arr.filter(n => n === arr.find(m => keys.every(k => m[k] === n[k])));const result = unique(arr, [ 'model', 'param1', 'param2' ]);- arr.filter(n => n === arr.find
+ arr.filter((n, i, a) => i === a.findIndexconst unique = function(arr, keys = n => n) {
const picked = new Map;
return arr.filter((...args) => {
const p = []
.concat(keys(...args))
.reduce((acc, k) => acc.set(k, acc.get(k) || new Map).get(k), picked);
return !p.set(this, p.has(this)).get(this);
});
}.bind(Symbol());const result = unique(arr, n => [ n.model, n.param1, n.param2 ]);