Rumah > hujung hadapan web > tutorial js > react实现移动端数据输出与显示

react实现移动端数据输出与显示

php中世界最好的语言
Lepaskan: 2018-04-20 11:28:07
asal
1811 orang telah melayarinya

这次给大家带来react实现移动端数据输出与显示,react实现移动端数据输出与显示的注意事项有哪些,下面就是实战案例,一起来看一下。

要求如下

  1. 输入框输入内容数据长度大于0,展示出预览信息

  2. 光标离开关闭预览信息

  3. 预览信息每隔4位插入一个特殊字符_,输入内容不变

  4. 限制长度为13位

  5. 只允许输入数字(0-9)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

// Zinput.js

import React, {

 Component

} from 'react';

import './Zinput.css'

// NOTE: 获取焦点事件 原生onFocus 即可

// NOTE: 离开焦点事件 原生onBlur即可

// NOTE: 输入框数据过滤 直接在change方法里进行过滤

// NOTE: 条件处理 通过不同条件返回不同节点做条件处理

class Zinput extends Component {

 constructor(props) {

  super(props);

  this.state = {

   value: '',

   showBig: false,

  };

  this.handleChange = this.handleChange.bind(this);

  this.inputOnFocus = this.inputOnFocus.bind(this);

  this.inputOnBlur = this.inputOnBlur.bind(this);

 }

 inputOnFocus() {

  if (this.state.value.length > 0) {

   this.setState({

    showBig: true

   })

  }

 }

 inputOnBlur() {

  this.setState({

   showBig: false

  })

  if(this.props.chanegNumber){

   this.props.chanegNumber(this.state.value)

  }

 }

 handleChange(event) {

  let val = event.target.value.substr(0, 13)

   .replace(/[^\d]/g, '')

  event.target.value = val

  this.setState({

   value: val,

   showBig: true,

  });

 }

 /**

  * 根据字符串没隔len位插入一个下滑杠,返回处理后的字符串

  * @method  getStr

  * @author 朱阳星

  * @datetime 2018-04-02T09:57:58+080

  * @email  zhuyangxing@foxmail.com

  * @param  {String} str 待处理字符串

  * @param  {Number} len 每隔位数插入下滑杠

  * @return  {String} 处理后的字符串

  */

 getStr(str, len) {

  let lenth = str.length

  let len1 = len - 1

  let newStr = ''

  for (var i = 0; i < lenth; i++) {

   if (i % len === len1 && i > 0) {

    newStr += str.charAt(i) + '_'

   else {

    newStr += str.charAt(i)

   }

  }

  if (newStr.length % (len + 1) === 0) {

   // 解决最后一位为补充项问题

   newStr = newStr.substr(0, newStr.length - 1)

  }

  return newStr

 }

 render() {

  // NOTE return 需要用圆括号包住并处理

  // NOTE 条件语句里没有节点也要用空字符串进行处理 否则sonalint会报错,页面也会报错

  const showBig = this.state.showBig ? (

   <p className="big-show">{ this.getStr(this.state.value,4) }</p>

  ) : ''

  return (

   <p className="zInput">

    <input className="input"

        type = "text"

        onFocus={ this.inputOnFocus }

        onBlur={ this.inputOnBlur }

        value={ this.state.value }

        onChange={ this.handleChange }>

        </input>

    {showBig}

   </p>

  )

 }

}

export default Zinput; // Don't forget to use export default!

Salin selepas log masuk

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!-- Zinput.css -->

.zInput{

  position: absolute;

  top:80px;

  left:40px;

   

}

.input {

 position: absolute;

 top: 0;

 left: 0;

}

.big-show {

  position: relative;

  top: -40px;

  font-size: 36px;

  line-height: 40px;

  background-color: red;

}

Salin selepas log masuk

功能虽然实现,但是肯定是作为某个节点的某个子组件使用的,父组件调用方法有两种

1.使用refs直接获取子组件state的值

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

constructor(props) {

 super(props);

 this.handerClick2 = this.handerClick2.bind(this);

}

handerClick2(){

 // NOTE 父组件通过refs获取子组件的state 

 console.log("使用ref获取子组件的值",this.refs.zinput.state.value)

}

render() {

 return (

  <p className="App">

   <Zinput ref="zinput"></Zinput>

   <input type="button" value="获取电话号码的值22" onClick={ this.handerClick2 }/>

  </p> 

 );

}

Salin selepas log masuk

2.每次子组件焦点离开时调用父组件传过来的方法,修改父组件state值

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

constructor(props) {

 super(props);

 this.state = {

  phoneNumber: '',

 };

 this.handerClick = this.handerClick.bind(this);

 this.changePhoneNumber = this.changePhoneNumber.bind(this);

}

changePhoneNumber(number){

 this.setState({

   phoneNumber: number,

 })

}

handerClick(){

 // NOTE 根据react的思想是在子组件处理完某件事的时候调用父组件的方法修改父组件的state值

 console.log("使用state获取值",this.state.phoneNumber)

}

render() {

 return (

  <p className="App">

   <Zinput ref="zinput" chanegNumber={this.changePhoneNumber}></Zinput>

   <input type="button" value="获取电话号码的值" onClick={ this.handerClick }/>

  </p>

 );

}

Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

node服务器跨域步奏详解

vue-router懒加载详解(附代码)

Atas ialah kandungan terperinci react实现移动端数据输出与显示. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan