在拖放过程中,如果有任何组件悬停在当前组件上,则当前组件会更改其样式。这不是按预期发生的吗?
During drag and drop if any component hover over the current component, the current component changes it's style.. This is not happening as expected?
import React from 'react';
import { findDOMNode } from 'react-dom';
import { DropTarget } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
let newStyle = {'display':'none','left':'0px'} ;
let target = {
hover(props,monitor,component){
newStyle.display = 'block';
newStyle.left = monitor.getClientOffset().x-findDOMNode(component).getBoundingClientRect().left+'px';
//The current mouse position where the "on hover indicator" is expected
return;
},
drop(props, monitor,component) {
newStyle.display = 'none';
newStyle.left = '0px';
return props;
}
}
function collect(connect, monitor) {
return {
connectDropTarget: connect.dropTarget(),
};
}
class component extends React.Component {
constructor(props){
super(props);
}
render = () => {
const { connectDropTarget } = this.props;
return connectDropTarget(
<div>
<Span style = { newStyle }> On hover indicator </span>
// here another component drops wrapped within div!
</div>
)
}
}
export default DropTarget('type', target, collect)(component);
在悬停回调中,如果我记录我的左侧 属性 newStyle 对象,它会按预期显示当前鼠标位置,但不会更改渲染方法中跨度的样式。
如有任何帮助,我们将不胜感激。提前致谢。
仅更改 React 中使用的变量的值不会强制重新渲染 - 仅更改 newStyle 的值不会执行任何操作。要让 React 组件重新呈现自己,您需要 a) 调用 setState 或 b) 调用 forceUpdate。
你 可以 做的是让它在悬停时更新为新样式,将其添加到状态,然后在悬停功能中操纵该状态,也许像这样:
import React from 'react';
import { findDOMNode } from 'react-dom';
import { DropTarget } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
let target = {
hover(props,monitor,component) {
let newStyle = {};
newStyle.display = 'block';
newStyle.left = monitor.getClientOffset().x-findDOMNode(component).getBoundingClientRect().left+'px';
component.setState({ style: newStyle });
return;
},
drop(props, monitor,component) {
let newStyle = {}
newStyle.display = 'none';
newStyle.left = '0px';
component.setState({ style: newStyle });
return props;
}
}
function collect(connect, monitor) {
return {
connectDropTarget: connect.dropTarget(),
};
}
class component extends React.Component {
constructor(props){
super(props);
}
state = {
style: { display: 'none', left: '0px' }
}
render = () => {
const { connectDropTarget } = this.props;
return connectDropTarget(
<div>
<Span style={ this.state.style }> On hover indicator </span>
// here another component drops wrapped within div!
</div>
)
}
}
export default DropTarget('type', target, collect)(component);
请注意悬停和放置函数中的 component.setState(),这实际上会强制组件重新呈现。 'component' 在这个实例中实际上是对组件实例的引用,因此如果您需要读取状态以执行其他操作,您也可以从中访问它的状态。如果您想更多地了解自己做错了什么,请查看 React 生命周期文档的这一部分:https://facebook.github.io/react/docs/react-component.html#setstate
import React from 'react';
import { findDOMNode } from 'react-dom';
import { DropTarget } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
let newStyle = {'display':'none','left':'0px'} ;
let target = {
hover(props,monitor,component){
newStyle.display = 'block';
newStyle.left = monitor.getClientOffset().x-findDOMNode(component).getBoundingClientRect().left+'px';
//The current mouse position where the "on hover indicator" is expected
return;
},
drop(props, monitor,component) {
newStyle.display = 'none';
newStyle.left = '0px';
return props;
}
}
function collect(connect, monitor) {
return {
connectDropTarget: connect.dropTarget(),
};
}
class component extends React.Component {
constructor(props){
super(props);
}
render = () => {
const { connectDropTarget } = this.props;
return connectDropTarget(
<div>
<Span style = { newStyle }> On hover indicator </span>
// here another component drops wrapped within div!
</div>
)
}
}
export default DropTarget('type', target, collect)(component);
在悬停回调中,如果我记录我的左侧 属性 newStyle 对象,它会按预期显示当前鼠标位置,但不会更改渲染方法中跨度的样式。
如有任何帮助,我们将不胜感激。提前致谢。
仅更改 React 中使用的变量的值不会强制重新渲染 - 仅更改 newStyle 的值不会执行任何操作。要让 React 组件重新呈现自己,您需要 a) 调用 setState 或 b) 调用 forceUpdate。
你 可以 做的是让它在悬停时更新为新样式,将其添加到状态,然后在悬停功能中操纵该状态,也许像这样:
import React from 'react';
import { findDOMNode } from 'react-dom';
import { DropTarget } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
let target = {
hover(props,monitor,component) {
let newStyle = {};
newStyle.display = 'block';
newStyle.left = monitor.getClientOffset().x-findDOMNode(component).getBoundingClientRect().left+'px';
component.setState({ style: newStyle });
return;
},
drop(props, monitor,component) {
let newStyle = {}
newStyle.display = 'none';
newStyle.left = '0px';
component.setState({ style: newStyle });
return props;
}
}
function collect(connect, monitor) {
return {
connectDropTarget: connect.dropTarget(),
};
}
class component extends React.Component {
constructor(props){
super(props);
}
state = {
style: { display: 'none', left: '0px' }
}
render = () => {
const { connectDropTarget } = this.props;
return connectDropTarget(
<div>
<Span style={ this.state.style }> On hover indicator </span>
// here another component drops wrapped within div!
</div>
)
}
}
export default DropTarget('type', target, collect)(component);
请注意悬停和放置函数中的 component.setState(),这实际上会强制组件重新呈现。 'component' 在这个实例中实际上是对组件实例的引用,因此如果您需要读取状态以执行其他操作,您也可以从中访问它的状态。如果您想更多地了解自己做错了什么,请查看 React 生命周期文档的这一部分:https://facebook.github.io/react/docs/react-component.html#setstate