React获取DOM节点

原生方法

利用原生方法中抓取DOM节点的方法,例如getElementByIdquerySelector

  1. import React from 'react'
  2. class RefDemo extends React.Component{
  3. handleClick(){
  4. document.getElementsByTagName('p')[0].style.color = 'red'
  5. }
  6. render(){
  7. return(
  8. <div>
  9. <p>哈哈哈</p>
  10. <input type='button' value='点击' onClick={this.handleClick.bind(this)} />
  11. </div>
  12. )
  13. }
  14. }
  15. export default RefDemo

Jquery方法

安装jquery包,使用jq选择器抓取DOM节点,可以用jq方法进行操作

  1. import React from 'react'
  2. import $ from 'jquery'
  3. class RefDemo extends React.Component{
  4. handleClick(){
  5. $('p').toggle('slow')
  6. //有就隐藏,没有就显示
  7. }
  8. render(){
  9. return(
  10. <div>
  11. <p>哈哈哈</p>
  12. <input type='button' value='点击' onClick={this.handleClick.bind(this)} />
  13. </div>
  14. )
  15. }
  16. }
  17. export default RefDemo

通过React的ref来获取DOM节点

refReference的缩写,拿到一个真实的DOM节点,使参数按引用传递,使用ref参数,则方法定义和调用方法都必须显式使用ref关键字。

Key:唯一一个不重复的值

  1. import React from 'react'
  2. class Ref extends React.Component{
  3. constructor(){
  4. super()
  5. this.state = {
  6. title:''
  7. }
  8. }
  9. handleClick(){
  10. this.setState({
  11. title:this.value.value
  12. })
  13. }
  14. render(){
  15. return(
  16. <div>
  17. <p>123{this.state.title}</p>
  18. <input ref={ value => this.value = value } onChange={this.handleClick.bind(this)} />
  19. <input type='button' value='点击' onClick={this.handleClick.bind(this)} />
  20. </div>
  21. )
  22. }
  23. }
  24. export default Ref

不仅可以获取DOM节点,还可以获取子组件的节点

  1. import React from 'react'
  2. class Test extends React.Component{
  3. constructor(){
  4. super()
  5. this.state = {
  6. show:true
  7. }
  8. }
  9. handleShow(){
  10. this.setState({
  11. show:!this.state.show
  12. })
  13. }
  14. render(){
  15. return(
  16. <div>
  17. <p style={{display:this.state.show ? 'block':'none'}}>杀人诛心</p>
  18. <input type='button' value='点击' onClick={this.handleShow.bind(this)} />
  19. </div>
  20. )
  21. }
  22. }
  23. class Ref extends React.Component{
  24. handleClick(){
  25. this.test.handleShow()
  26. }
  27. render(){
  28. return(
  29. <div>
  30. <Test ref={test => this.test = test} onClick={this.handleClick.bind(this)}/>
  31. <input type='button' value='点' onClick={this.handleClick.bind(this)} />
  32. </div>
  33. )
  34. }
  35. }
  36. export default Ref