Вычисляемое свойство ES6 в React
Моя четвертая каретка сломана, я понятия не имею, почему она не уменьшается.
constructor(props) {
super(props);
this.containerWidth = props.width || "100%";
this.state = {
current_hour: 0,
current_minute: 0,
hour_interval: 1,
minute_interval: 1
};
// this.handleAdjuster = this.handleAdjuster.bind(this);
}
handleAdjuster(action, type) {
if (action === "add") {
this.setState({
[`current_${type}`]: this.state[`current_${type}`] + this.state[`${type}_interval`]
});
} else if (action === "minus") {
this.setState({
[`current_${type}`]: this.state[`current_${type}`] - this.state[`${type}_interval`]
});
}
}
Что-то не так с моим обработчиком кликов? Я сделал демо https://codesandbox.io/s/v8xw3lnzpy чтобы продемонстрировать мою проблему, попробуйте щелкнуть 4-ю курсор.
setState каждый раз, когда вы создаете новое состояние на основе существующего. Подробности здесь. Возможно, это не проблема, которую вы наблюдаете, но вполне может быть другая проблема, если кто-то щелкает достаточно быстро.
@ T.J. Crowder щелкните демонстрацию, и вы ее увидите.
Полное содержание вашего вопроса должно быть в вашим вопросом, а не только ссылкой. Ссылки гниют, делая вопрос и ответы на него бесполезными для людей в будущем, и людям не нужно уходить за пределы сайта, чтобы помочь вам. Задайте вопрос минимальный воспроизводимый примерв, в идеале используя Stack Snippets (кнопка панели инструментов <>), чтобы сделать его работоспособным.
@ T.J.Crowder, почему мой инкремент работает? Я пробовал нажимать быстро, не вижу никаких проблем.
Если просто так получится, что обновления не складываются, это сработает. Но это не значит, что это правильно, или что вы не должны делать то, что говорится в документации.
@ T.J.Crowder примет это к сведению, но этот вопрос о другом? Я не думаю, что проблема была вызвана использованием стиля обратного вызова.
Я подозреваю, что это так, да, поэтому я сказал это выше. («Возможно, это не проблема, которую вы наблюдаете ...») Я не знаю наверняка, потому что в вопросе недостаточно кода, чтобы знать. Код в вопросе кажется прекрасным Другие, чем эта проблема, но я подозреваю, что проблема в коде, который вы не показали.
@ T.J.Crowder, ссылка на демонстрациюcodeandbox содержит рабочий код с воспроизводимой проблемой.
@ShubhamKhatri: Так работает не так. См. Этот комментарий выше (и Вот этот).
@ T.J.Crowder Я уже сократил свое приложение до небольшой части кода, чтобы продемонстрировать проблему, что не так с вопросом выше?
Я тебе уже сказал. См. этот комментарий и этот комментарий.
Caret = ^. Carat = Precious stone measurement unit. @ T.J.Crowder
@ArmanCharan: Совершенно верно, у меня плохо. :-)
Ответы 1
Ваш «минус» (4-я) каретка находится внутри «добавить» (3-я) каррета, и всякий раз, когда вы нажимаете «минус», выполняется первый дочерний элемент и выполняется минус, но затем выполняется и родительский элемент (и это «добавление» 3-го кадра) это отменяет 4-ю каретку. Поместите четвертый карет под третьим, а не внутрь. Простая иерархическая ошибка.
Что-то вроде этого:
<div>
<div className = "control-wrap">
<div
onClick = {() => this.handleAdjuster("add", "minute")}
className = "caret-wrap"
>
<span className = "caret">▲</span>
</div>
<div
onClick = {() => this.handleAdjuster("minus", "minute")}
className = "caret-wrap"
>
<span className = "caret">▼</span>
</div>
</div>
</div>
^? Я не вижу ни того, ни другого в коде. Можете ли вы обновить свой вопрос с помощью минимальный воспроизводимый пример, демонстрирующего проблему, в идеале работоспособный, используя Stack Snippets (кнопка панели инструментов[<>]). Фрагменты стека поддерживают React, включая JSX; вот как это сделать.