我的应用程序包含一个基本输入，用户可以在其中键入一条消息。然后将消息附加到所有其他消息的底部，就像聊天一样。当我向消息数组添加新的聊天消息时，我还想向下滚动到该消息。
每个 html 元素都有一个基于循环中的索引动态创建的 ref，该索引将它们打印出来。添加新消息的代码尝试在添加新消息后滚动到最新消息。
此代码仅在放置在 setTimeout 函数中时才有效。我不明白为什么会这样。
从数组中创建注释的代码
comments = this.state.item.notes.map((comment, i) => (
<div key={i} ref={i}>
<div className="comment-text">{comment.text}</div>
</div>
));
添加新评论的按钮
<input type="text" value={this.state.textInput} onChange={this.commentChange} />
<div className="submit-button" onClick={() => this.addComment()}>Submit</div>
添加评论功能
addComment = () => {
const value = this.state.textInput;
const comment = {
text: value,
ts: new Date(),
user: 'Test User',
};
const newComments = [...this.state.item.notes, comment];
const newState = { ...this.state.item, notes: newComments };
this.setState({ item: newState });
this.setState({ textInput: '' });
setTimeout(() => { …我正在使用ui-date(https://github.com/angular-ui/ui-date)(这是一个扩展jquery ui日期选择器的angular指令)来创建一个弹出日期选择器,当点击一个输入时上.问题是,它位于$ modal窗口内(来自angular-ui).当您单击输入框时,日期选择器的div将附加到底部,就在结束标记的上方,即包含$ modal的div的OUTSIDE.因此,当$ modal窗口关闭(并因此从DOM中删除)时,日期选择器的div保持不变.
我找不到任何关于jquery或ui-date的文档,它们允许将div附加到另一个元素,它似乎是内置的.
我不确定如何解决这个问题.
日期选择期间的代码
<body>
<div class="modal"> <!-- This is the modal div which will be created and destroyed -->
<input type="text" class="input-calendar" id="reason_date" name="reason_date" ng-model="effectiveDate" ui-date="DateOptions" date-input-format date-validation required="required" autocomplete="off" />
</div>
<!-- This is where the date-picker div is appended -->
<div class="date-picker">
</div>
</body>
模态关闭后
<body>
<!-- Modal div has been destroyed upon close -->
<!-- Date picker div was outside of modal div, so it remains -->
<div class="date-picker">
</div> …我正在 React 中制作一个简单的通知服务，但遇到了一个非常奇怪的问题，我找不到任何提及或解决方案。
我的组件有一组通知消息。每个“通知”都有一个“onClick”和“onAnimationEnd”绑定，它们调用一个函数，将它们从通知数组中删除。基本思想是通知会逐渐消失（使用 CSS 动画）然后被移除，或者允许用户手动点击通知来移除它。
有趣的错误如下。如果添加两个通知，第一个将触发其 onAnimationEnd 并移除自身。剩下的通知会突然跳到它的css动画的结尾，并且永远不会触发它自己的onAnimationEnd。
更奇怪的是，如果您添加四个通知，其中恰好两个会出现上述错误，而另外两个则正常运行。
还值得一提的是，如果您创建了两个通知，然后单击一个两个手动删除它，则剩余的通知将正常运行并触发其自己的 onAnimationEnd 功能。
因此，我不得不得出结论，循环遍历数组和 onAnimationEnd 触发器的某些组合在反应中以某种方式被窃听，除非有人可以指出此问题的解决方案。
反应代码
class Test extends React.Component {
constructor (props) {
super(props)
this.state = {
notifications: []
}
}
add = () => {
this.setState({notifications: [...this.state.notifications, 'Test']})
}
remove = (notification) => {
let notificationArray = this.state.notifications
notificationArray.splice(notificationArray.indexOf(notification), 1)
this.setState({notifications: notificationArray})
}
render() {
return (
<div>
<button onClick={this.add}>Add Notification</button>
<div className="notification-container">
{this.state.notifications.map(
(notification,i) => {
return (
<div onAnimationEnd={()=>this.remove(notification)}
onClick={() => this.remove(notification)}
className="notification"
key={i}>
{notification} …WebStorm自动完成className= 进className={} ，而不是className=""因为它应该。
有没有办法解决或编辑此问题？