this.setState({ comments: comments.filter( (comment, i) => { return i !== index; }, () => localStorage.setItem("state", JSON.stringify(this.state)) ) });
Я реализовал очень простые вкладки на React.js.
на Redux не работают
incrementCount = (id, name, price) => {
this.setState(({ count }) => {
const el = count.find(n => n.id === id);
return {
count: el
? count.map(n => n === el ? { ...n, count: n.count + 1 } : n)
: [ ...count, { id, name, price, count: 1 } ]
};
});
}this.state.count.reduce((acc, n) => acc + n.price * n.count, 0)const onClickRow = () => {
console.log('Строка');
};
const onClickButton = e => {
e.stopPropagation();
console.log('Кнопка');
};<div onClick={onClickRow}>
<button onClick={onClickButton}>click me</button>
</div>const onClickRow = e => {
if (e.target.tagName === 'BUTTON') {
console.log('Кнопка');
} else {
console.log('Строка');
}
};<div onClick={onClickRow}>
<button>click me</button>
</div>Как правильно описать контролируемый компонент (Controlled Components)?
помимо event мне нужно передать еще параметрыonClick={this.handleClickAnswerCheck.bind(this, param1, param2)}>
handleClickAnswerCheck = (param1, param2) => { ... //как запустить здесь //event.preventDefault(); или event.target... //?
<button onClick={this.onClick.bind(this, param1, param2)}>click me</button>onClick(param1, param2, e) {
e.preventDefault();
console.log(e.target);
}<button onClick={e => this.onClick(e, param1, param2)}>click me</button>onClick(e, param1, param2) {
...
}<button onClick={this.onClick} data-param1={param1} data-param2={param2}>click me</button>onClick = e => {
const { param1, param2 } = e.target.dataset;
...
}Может написать регулярку, которая будет убирать только первый и последнии слеши?
.slice(1, -1).regexp используется только для задания значений атрибута pattern, то пусть его свойства будут сразу строками, а не регулярными выражениями. И ещё, зачем делать его обычным полем класса? - так будет создаваться отдельный объект для каждого экземпляра. Пусть будет статическим или вообще не принадлежит классу.
position: absolute; для .tabsPanelHidden.
ReactDOM.render(
<News data={myNews} />,
document.querySelector('#root')
);data-id={user.id}const elemId = +e.currentTarget.dataset.id;
this.setState(({ events }) => ({
events: events.map(n => n.id === id ? { ...n, title: newTitle } : n),
}));{this.state.image}<img src={this.props.items[this.state.image].img} /><App /><App items={items} />
function App() {
const [ values, setValues ] = useState(Array(10).fill(''));
const onChange = ({ target: t }) => {
const index = +t.dataset.index;
const value = t.value;
setValues(values.map((n, i) => i === index ? value : n));
if (index < values.length - 1 && value) {
inputRefs.current[index + 1].focus();
inputRefs.current[index + 1].select();
}
};
const inputRefs = useRef([]);
return (
<div>
{values.map((n, i) => (
<div>
<input
value={n}
data-index={i}
onChange={onChange}
ref={input => inputRefs.current[i] = input}
maxLength="1"
/>
</div>
))}
</div>
);
}state = {
likes: localStorage.getItem('likes') | 0,
}
plus = () => {
this.setState(({ likes }) => ({
likes: likes + 1,
}), () => localStorage.setItem('likes', this.state.likes));
}