建设银行网站用户注册不了,电商网站建设 数商云,利用大平台做网站,做网站推广logoRefs含义
允许访问真实DOMReact数据流#xff1a;通过props来实现父子组件的交互Refs允许强制修改子组件
// 1. 构造器离添加实例属性 this.ref React.createRef()
// 2. 组件上绑定ref ref{this.ref}
// 3. 使用#xff1a;this.ref.currentinput
class MyInput extends…Refs含义
允许访问真实DOMReact数据流通过props来实现父子组件的交互Refs允许强制修改子组件
// 1. 构造器离添加实例属性 this.ref React.createRef()
// 2. 组件上绑定ref ref{this.ref}
// 3. 使用this.ref.currentinput
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 (divinputtypetextref{this.inputRef}value{this.state.value}onChange{this.changeInputValue}/button onClick{this.inputFocus}聚焦/buttonbutton 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 (divvideo srchttps://www.w3school.com.cn/i/movie.oggwidth300height200controlsref{this.videoRef}/videodivbutton onClick{() this.videoPlay(play)}播放/buttonbutton 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 400pxoBox.style.height 400pxoBox.style.backgroundColor skyblue}render() {return (divstyle{{width: 200 px,height: 200 px,backgroundColor: orange,transition: all 1s}}ref{this.boxRef}/divbutton 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}}h1This is a Modal/h1pThis 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)}打开/buttonbutton onClick{() this.changeStatus(false)}关闭/button/)}
}
