之前的文章我们介绍了  React 事件,方法, React定义方法的几种方式 获取数据 改变数据 执行方法传值。接下来我们将介绍 React 表单事件 键盘事件 事件对象以及 React中 的 ref 获取 dom 节点 、双向数据绑定,约束性和非约束性组件。

  1. 1 import React, {Component} from 'react';
  2. 2
  3. 3 class Home extends Component {
  4. 4 constructor(props) {
  5. 5 super(props);
  6. 6 this.state = {
  7. 7 name: "zhangsan",
  8. 8 };
  9. 9
  10. 10 }
  11. 11
  12. 12
  13. 13 getData = (event) => {
  14. 14 console.log(this.state.name);
  15. 15 event.target.style.color = "red";
  16. 16 }
  17. 17
  18. 18 // event
  19. 19 inputChange1 = (event)=>{
  20. 20 this.setState({
  21. 21 name: event.target.value
  22. 22 })
  23. 23 }
  24. 24
  25. 25 // ref
  26. 26 inputChange2 = ()=>{
  27. 27 this.setState({
  28. 28 name: this.refs.name.value
  29. 29 })
  30. 30 }
  31. 31
  32. 32 // 键盘事件
  33. 33 inputChange3 = (event)=>{
  34. 34 console.log(event.keyCode)
  35. 35 }
  36. 36
  37. 37 inputGet = () =>{
  38. 38 console.log(this.state.name)
  39. 39 }
  40. 40
  41. 41 render() {
  42. 42 return (
  43. 43 <div>
  44. 44 <p>Hello {this.state.name}</p>
  45. 45
  46. 46 <button onClick={this.getData}>获取event</button>
  47. 47
  48. 48 <br/><br/>
  49. 49
  50. 50 {/*event*/}
  51. 51 <input onChange={this.inputChange1} type="text"/>
  52. 52 <button onClick={this.inputGet}>获取input值</button>
  53. 53
  54. 54 <br/><br/>
  55. 55
  56. 56 {/*ref*/}
  57. 57 <input ref="name" onChange={this.inputChange2} type="text"/>
  58. 58 <button onClick={this.inputGet}>获取input值</button>
  59. 59
  60. 60 <br/><br/>
  61. 61
  62. 62 {/*键盘事件*/}
  63. 63 <input onKeyUp={this.inputChange3} type="text"/>
  64. 64 <button onClick={this.inputGet}>获取input值</button>
  65. 65
  66. 66 <br/><br/>
  67. 67
  68. 68 {/*value defaultValue*/}
  69. 69 <input value={this.state.name} onChange={this.inputChange1} type="text"/>
  70. 70 <input defaultValue={this.state.name} onChange={this.inputChange1} type="text"/>
  71. 71 </div>
  72. 72 );
  73. 73 }
  74. 74 }
  75. 75
  76. 76 export default Home;

 

 

在调用 getData 的方法时传值 event,就可以获取到该元素的原生 DOM 属性,我们可以对其进行操作,如改变元素颜色:event.target.style.color = “red”;

 

在 React 中并没有提供类似于 Vue 中 model 的双向数据绑定,所以我们得自己来写,在 input 框中输入内容时我们可以根据 onChange 事件实时获取 input 框中的内容,再通过 event 事件获取到原生 DOM 里面的 value 值再赋给 this.state 中的数据,既可以达到双向数据绑定的目标。

 

当然 React 提供了类似于 Vue 的 ref 属性,我们同样可以通过 ref 绑定属性名,然后通过 refs 获取到该属性名,就能获取到 input 框的 value 值。然后达到双向数据绑定的目标。

 

React 中同样为我们提供了键盘事件 onKeyUp 和 onKeyDown ,我们可以根据该事件达到双向数据绑定的目标。

 

在 input 框最初赋值时可以有 value 和 defaultValue 两种赋值方式,

defaultValue 是原生 DOM 中的 value 属性,可以是一个死值,也可以是 this.state 中的数据,React 不会去管它。这样的组件叫做非约束性组件。

value 是 React 中的一个属性,它的值可以是一个死值,也可以是 this.state 中的数据, 但是需要通过 onChange 事件配合使用,如果不写 onChange 事件会报错。这样的组件叫做非约束性组件。

最后运行结果为:

 

版权声明:本文为weijiutao原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/weijiutao/p/10648405.html