Refs含义

• 允许访问真实DOM
• React数据流：通过props来实现父子组件的交互
• Refs允许强制修改子组件

// 1. 构造器离添加实例属性 this.ref = React.createRef()
// 2. 组件上绑定ref ref={this.ref}
// 3. 使用：this.ref.current

input

class MyInput extends React.Component {constructor(props) {super(props)this.inputRef = React.createRef()}state = {value: '123'}// 聚焦 失焦inputFocus = () => {const oInput = this.inputRef.currentoInput.focus()oInput.value = ''}inputBlur = () => {const oInput = this.inputRef.currentoInput.blur()oInput.value = ''}changeInputValue = (e) => {this.setState({value: e.target.value})}render() {return (<div><inputtype="text"ref={this.inputRef}value={this.state.value}onChange={this.changeInputValue}/><button onClick={this.inputFocus}>聚焦</button><button onClick={this.inputBlur}>失焦</button></div>)}
}

video

class MyVideo extends React.Component {constructor(props) {super(props);this.videoRef = React.createRef();}videoPlay = (operation) => {const oVideo = this.videoRef.currentoperation === 'play' ? oVideo.play() : oVideo.pause()}render() {return (<div><video src="https://www.w3school.com.cn/i/movie.ogg"width="300"height="200"controlsref={this.videoRef}></video><div><button onClick={() => this.videoPlay('play')}>播放</button><button onClick={() => this.videoPlay('pause')}>暂停</button></div></div>)}
}

强制动画

class MyBox extends React.Component {constructor(props) {super(props)this.boxRef = React.createRef()}growBox = () => {const oBox = this.boxRef.currentoBox.style.width = '400px'oBox.style.height = '400px'oBox.style.backgroundColor = 'skyblue'}render() {return (<><divstyle={{width: 200 + 'px',height: 200 + 'px',backgroundColor: 'orange',transition: 'all 1s'}}ref={this.boxRef}></div><button onClick={this.growBox}>变大</button></>)}
}

引入jQuery

    growBox = () => {const $box = $(this.boxRef.current)console.log('jquery dom对象', $box)$box.animate({width: '400px',height: '400px',})}

模态框 状态提升

class Modal extends React.Component {constructor(props) {super(props)this.modalRef = React.createRef()}render() {return (<divref={this.modalRef}style={{width: '300px',border: '1px solid #000',display: this.props.toOpen ? 'block' : 'none'}}><h1>This is a Modal</h1><p>This is a super Modal</p></div>)}
}
class App extends React.Component {state = {toOpen: false,}changeStatus = (toOpen) => {this.setState({toOpen})}render() {return (<><Modal toOpen={this.state.toOpen} /><button onClick={() => this.changeStatus(true)}>打开</button><button onClick={() => this.changeStatus(false)}>关闭</button></>)}
}