前言
- 非受控组件也就是值,不受到 React 控制的表单元素就是非受控组件
废话不多说直接上代码:
import React from 'react'; class App extends React.PureComponent { constructor(props) { super(props); this.myRef = React.createRef(); } render() { return ( <form onSubmit={(event) => { this.submit(event) }}> <input type="text" ref={this.myRef}/> <input type="submit"/> </form> ) } submit(event) { // 禁止默认行为 event.preventDefault(); console.log(this.myRef.current.value); } } export default App;
官方文档
高阶组件(Higher-Order Components,简称为 HOC)
- 参数为组件,返回值为新组件的函数就可以称之为高阶组件
import React from 'react'; class Home extends React.PureComponent { render() { return ( <div>Home</div> ) } } function enhanceComponent(WrappedComponent) { class AdvComponent extends React.PureComponent { render() { return ( <div> <WrappedComponent/> </div> ) } } return AdvComponent; } const AdvComponent = enhanceComponent(Home); class App extends React.PureComponent { render() { return ( <div> <AdvComponent/> </div> ) } } export default App;
官方文档
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗