Question

我想根据用户是否拖动画布元素来显示一些元素。

为此，我创建了一个状态变量和方法来更改父组件中的状态值。该父组件有两个子组件child1component和child2component。

Child1component具有canvas元素。当用户拖动此元素时，状态变量应更改。我是根据在mousedown事件中触发的mousemove事件来完成的。

在child2component中，我想使用来自parentcomponent的状态变量，并且如果该状态为true（意味着拖动的画布元素应显示一个按钮）

下面是代码，

export default class ParentComponent extends React.PureComponent {
    constructor(props) {
        this.state{
             mouse_drag: false,
        };
    mouse_drag = () => { 
        this.setState({mouse_drag: !this.state.mouse_drag});
    };
    <Child1Component
        mouse_drag={this.mouse_drag}/>
    <Child2Component 
        mouse_drag_state={this.state.mouse_drag}/>}


   export default class Child1Component extends React.PureComponent {
       componentDidMount() {
           canvas.addEventListener('mousedown', this.mousedown);
       } 
       componentWillUnMount() {
           canvas.removeEventListener('mousedown', this.mousedown);
       } 
       mousedown = e => {
           window.document.addEventListener('mousemove', this.mousemove);
       };

       mousemove = e => {
           this.props.mouse_drag();
       };}

       export default class Child2Component extends React.PureComponent {
           return {
               {this.props.mouse_drag_state &&
                   <button>Display button</button>}}
       }

有人可以帮我在画布元素鼠标拖动上显示按钮。谢谢。

如何在reactjs中跟踪在状态变量中拖动元素

0 个答案: