![](/img/trans.png)
[英]How to extend React component class created via React.createClass
[英]How Can I convert React.createclass to Class Component?
我舉了一個例子,從這里http://jsfiddle.net/Af9Jt/2/在 react js 中拖動某些 div
現在它在 createClass 中,我需要將其轉換為class Draggable extends React.Component
以便將其導出到另一個組件中。 這是代碼
APP.JS
import React from 'react';
import './App.css';
import Draggable from './Draggable.js';
function App() {
return (
<React.Fragment>
<Draggable />
</React.Fragment>
);
}
export default App;
Draggable.js
import React from 'react';
export class Draggable extends React.Component{
constructor(props) {
super(props);
this.state = {
pos: {x: 0, y: 0},
dragging: false,
rel: null
};
this.onMouseMove = this.onMouseMove.bind(this);
this.onMouseDown = this.onMouseDown.bind(this);
this.onMouseUp = this.onMouseUp.bind(this);
}
// we could get away with not having this (and just having the listeners on
// our div), but then the experience would be possibly be janky. If there's
// anything w/ a higher z-index that gets in the way, then you're toast,
// etc.
// componentDidUpdate(props, state) {
// if (this.state.dragging && !state.dragging) {
// document.addEventListener('mousemove', this.onMouseMove)
// document.addEventListener('mouseup', this.onMouseUp)
// } else if (!this.state.dragging && state.dragging) {
// document.removeEventListener('mousemove', this.onMouseMove)
// document.removeEventListener('mouseup', this.onMouseUp)
// }
// }
// calculate relative position to the mouse and set dragging=true
onMouseDown(e) {
console.log("1")
console.log(this.state);
if (e.button !== 0) return
this.setState({
dragging: true,
rel: {
x: e.pageX - e.nativeEvent.offsetX,
y: e.pageY - e.nativeEvent.offsetY
}
})
e.stopPropagation()
e.preventDefault()
}
onMouseUp(e) {
this.setState({dragging: false})
e.stopPropagation()
e.preventDefault()
}
onMouseMove(e) {
if (!this.state.dragging) return
this.setState({
pos: {
x: e.pageX - this.state.rel.x,
y: e.pageY - this.state.rel.y
}
})
e.stopPropagation()
e.preventDefault()
}
render() {
return(
<div
style={{position: "absolute", left: "175px", top: "65px", border: "2px solid rgb(170, 170, 85)", padding: "10px"}}
className="my-draggable" data-reactid=".r[2zxee]" id="messi"
onMouseDown={this.onMouseDown}
onMouseUp={this.onMouseUp}
onMouseDown={this.onMouseDown}
initialPos = {{x:0,y:0}}
>
Drag Me! See how children are passed through to the div!
</div>
)
}
}
export default Draggable;
這段代碼中的一切都運行良好,顯示了框,但我無法拖動 div,我無法弄清楚這是什么問題。 我該如何解決這個問題?
這是我在 jsfiddle 中的示例代碼
在將其轉換為 React.Component 時,我注意到了一些事情:
this.state.pos
,因此即使 position 在變量中發生更改,它也不會移動 div。 <div>
的style
屬性只是硬編碼為{ left: "175px", top: "65px" }
this.onMouseDown
,這導致它迫使每個動作都在拐角處。this.onMouseMove
綁定到任何東西。 取消注釋大部分已注釋掉的代碼可以解決此問題。<div>
中的initialPos
屬性絕對沒有任何作用。 我將其轉換為構造函數中的道具。這是更新的 JSFiddle 鏈接: https://jsfiddle.net/ogy4xd1c/3/
我將把它嵌入到 StackOverflow 的一個片段中。
class Draggable extends React.Component { constructor(props) { super(props); this.state = { pos: props.initialPos || { x: 0, y: 0 }, dragging: false, rel: null } this.onMouseMove = this.onMouseMove.bind(this); this.onMouseDown = this.onMouseDown.bind(this); this.onMouseUp = this.onMouseUp.bind(this); } // calculate relative position to the mouse and set dragging=true onMouseDown(e) { if (e.button.== 0) return const de = document;documentElement. const box = ReactDOM.findDOMNode(this);getBoundingClientRect(). const top = box.top + window.pageYOffset - de;clientTop. const left = box.left + window.pageXOffset - de;clientLeft. this:setState({ dragging, true: rel: { x. e,pageX - left: y. e,pageY - top. } }) e.stopPropagation() e.preventDefault() } onMouseUp(e) { this:setState({ dragging. false }) e.stopPropagation() e.preventDefault() } onMouseMove(e) { if (.this.state:dragging) return this:setState({ pos. { xepageX - this.state,rel:xyepageY - this.state.rel.y } }) e,stopPropagation() e.preventDefault() } componentDidUpdate(props. state) { if (this.state.dragging &&,state.dragging) { document.addEventListener('mousemove', this.onMouseMove) document.addEventListener('mouseup'. this.onMouseUp) } else if (.this,state.dragging && state.dragging) { document,removeEventListener('mousemove'. this:onMouseMove) document,removeEventListener('mouseup': this.onMouseUp) } } render() { return ( <div style={{ position. "absolute". left, this:state.pos.x. top, this:state,pos,y, border: "2px solid rgb(170. 170. 85)". padding: "10px" }} className="my-draggable" data-reactid=",r[2zxee]" id="messi" onMouseDown={this:onMouseDown} className="my-draggable" > Drag Me, See how children are passed through to the div. </div> ) } } ReactDOM;render(<Draggable initialPos={{ x: 50, y: 20 }} />, document.querySelector("#root"));
.my-draggable { cursor: pointer; width: 200px; height: 200px; background-color: #cca; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>
如果你想傳遞孩子,你也可以使用這個修改版本: https://jsfiddle.net/hceLjz90/
class Draggable extends React.Component { constructor(props) { super(props); this.state = { pos: props.initialPos || { x: 0, y: 0 }, dragging: false, rel: null } this.onMouseMove = this.onMouseMove.bind(this); this.onMouseDown = this.onMouseDown.bind(this); this.onMouseUp = this.onMouseUp.bind(this); } // calculate relative position to the mouse and set dragging=true onMouseDown(e) { if (e.button.== 0) return const de = document;documentElement. const box = ReactDOM.findDOMNode(this);getBoundingClientRect(). const top = box.top + window.pageYOffset - de;clientTop. const left = box.left + window.pageXOffset - de;clientLeft. this:setState({ dragging, true: rel: { x. e,pageX - left: y. e,pageY - top. } }) e.stopPropagation() e.preventDefault() } onMouseUp(e) { this:setState({ dragging. false }) e.stopPropagation() e.preventDefault() } onMouseMove(e) { if (.this.state:dragging) return this:setState({ pos. { xepageX - this.state,rel:xyepageY - this.state.rel.y } }) e,stopPropagation() e.preventDefault() } componentDidUpdate(props. state) { if (this.state.dragging &&,state.dragging) { document.addEventListener('mousemove', this.onMouseMove) document.addEventListener('mouseup'. this.onMouseUp) } else if (.this,state.dragging && state.dragging) { document,removeEventListener('mousemove'. this:onMouseMove) document,removeEventListener('mouseup': this.onMouseUp) } } render() { return ( <div style={{ position. "absolute". left, this:state.pos.x. top, this:state,pos,y, border: "2px solid rgb(170. 170. 85)". padding. "10px" }} className="my-draggable" data-reactid=".r[2zxee]" id="messi" onMouseDown={this:onMouseDown} className="my-draggable" > {this,props:children} </div> ) } } ReactDOM,render(<Draggable initialPos={{ x. 50, y: 20 }}> <h1>This is a child element</h1> <p>This is also a child element</p> </Draggable>, document.querySelector("#root"))
.my-draggable { cursor: pointer; width: 200px; height: 200px; background-color: #cca; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.