正在运行的应用程序位于:https://github.com/BeerDRinker/recompose-ref
以下代码(/src/App.js中的注释部分)按预期工作:
class App extends Component {
constructor(props) {
super(props);
this.node = React.createRef();
this.state = {
value: 1
};
}
handleTouchStart = e => {
e.preventDefault();
this.setState({ value: this.state.value + 1 });
};
handleTouchEnd = e => {
e.preventDefault();
this.setState({ value: this.state.value - 1 });
};
componentDidMount() {
this.node.current.ontouchstart = this.handleTouchStart;
this.node.current.ontouchend = this.handleTouchEnd;
}
render() {
return (
<div>
<h3>Value: {this.state.value}</h3>
<button ref={this.node}>Submit</button>
</div>
);
}
}
export default App;
但是我需要使用Recompose来实现相同的功能。我尝试过,但没有任何效果。我的代码示例(/src/App.js中未注释的部分)不起作用:
import React from "react";
import {
compose,
lifecycle,
setDisplayName,
withProps,
withStateHandlers
} from "recompose";
import "./App.css";
const state = {
value: 1
};
const stateHandlers = {
handleTouchStart: value => () => ({
value: value + 1
}),
handleTouchEnd: value => () => ({
value: value - 1
})
};
export const enhance = compose(
setDisplayName("App"),
withProps(props => ({
bookNode: React.createRef()
})),
withStateHandlers(state, stateHandlers),
lifecycle({
componentDidMount() {
this.bookNode.current.ontouchstart =
this.handleTouchStart;
this.bookNode.current.ontouchend = this.handleTouchEnd;
}
})
);
export const App = ({ value, bookNode }) => (
<div>
<h3>Value: {value}</h3>
<button ref={bookNode}>Submit</button>
</div>
);
export default enhance(App);
刚开始使用重组,很多事情对我来说还是很神奇的)) 希望有人能帮助我,过几天解决这个问题。
答案 0 :(得分:3)
组成组件有问题。
bookNode
上没有this
和事件处理程序。 App
是无状态组件,无法访问this
,bookNode
,事件处理程序是props。
传递给 state 处理程序的不是value
,而是顾名思义的是state
。
应该是:
const stateHandlers = {
handleTouchStart: state => () => ({
value: state.value + 1
}),
handleTouchEnd: state => () => ({
value: state.value - 1
})
};
export const enhance = compose(
setDisplayName("App"),
withProps(props => ({
bookNode: React.createRef()
})),
withStateHandlers(state, stateHandlers),
lifecycle({
componentDidMount() {
this.props.bookNode.current.ontouchstart = this.props.handleTouchStart;
this.props.bookNode.current.ontouchend = this.props.handleTouchEnd;
}
})
);
export const App = ({ value, bookNode }) => (
<div>
<h3>Value: {value}</h3>
<button ref={bookNode}>Submit</button>
</div>
);
这里是demo。
通常没有理由手动访问DOM来设置事件,因为React可以处理此事。这消除了对ref和生命周期挂钩的需要:
export const enhance = compose(
setDisplayName("App"),
withStateHandlers(state, stateHandlers)
);
const App = ({ value, handleTouchStart, handleTouchEnd }) => (
<div>
<h3>Value: {value}</h3>
<button onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd}>Submit</button>
</div>
);