javascript - 如何在reactjs中聚焦div元素并停止默认滚动

Question

我一直试图专注于 div 元素，但焦点被页面滚动覆盖并停止窗口滚动。我是 reactjs 的新手，我试图将这个操纵杆和键盘箭头包含在控制器中。感谢这里的帮助我的代码

import React from 'react';
import { Joystick } from 'react-joystick-component';
import ArrowKeysReact from 'arrow-keys-react';
export default class Newjoystick extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        content: 'Use arrow keys on your keyboard!'
    };
    ArrowKeysReact.config({
        left: () => {
            this.setState({
                content: 'left key detected.'
            });
        },
        right: () => {
            this.setState({
                content: 'right key detected.'
            });
        },
        up: () => {
            this.setState({
                content: 'up key detected.'
            });
        },
        down: () => {
            this.setState({
                content: 'down key detected.'
            });
        }
    });
}
handleMove(event) {
    console.log('handle move' + event.direction);
    console.log('handle move' + event.x);
    console.log('handle move' + event.y);
    console.log('handle move' + event.type);
}

handleStop() {
    console.log('handle stop');
}
checking() {
    console.log('arrow');
}

focus() {
     this.refs.keyBoard.focus();
}

render() {
    return (
        <div>
            <div {...ArrowKeysReact.events} tabIndex="1"
                onClick={this.checking}
                ref="keyBoard"
            >
                {this.state.content}

                <Joystick size={100} baseColor="#b7b7b7" 
  stickColor="#ccc" move={this.handleMove} stop={this.handleStop}> 
  </Joystick>
            </div >
            <div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div><div>
                <p>Something</p>
                <br />
            </div>
        </div>
    )
  }
}

结合两个 npm

请找到以下链接以供参考：

箭头键反应和操纵杆

标签： javascriptreactjs