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
| import React from 'react'
| import './index.less'
|
| class Input extends React.PureComponent {
| static defaultProps = {
| disabled: false,
| type: 'text',
| }
|
| handleChange = (e) => {
| const {
| onChange,
| index,
| } = this.props;
| if (onChange) {
| onChange(e, index);
| };
| }
|
| handleBlur = (e) => {
| const {
| onBlur,
| index,
| } = this.props;
| if (onBlur) {
| onBlur(e, index);
| };
| }
|
| fixControlledValue = (value) => {
| if (typeof value === 'undefined' || value === null) {
| return '';
| };
| return value;
| }
|
| render() {
| const {
| type,
| name,
| width,
| margin,
| style,
| inputStyle = {},
| maxLength,
| rows,
| disabled,
| ...otherProps
| } = this.props;
| /*
| * defaultValue只会在第一次渲染有效
| * defaultValue和value尽量不共存，如果共存的话value将会覆盖defaultValue
| * 在共存的情况下，如果value值为undefined或者null，会被defaultValue覆盖
| */
| if ('value' in otherProps) {
| otherProps.value = this.fixControlledValue(otherProps.value);
| delete otherProps.defaultValue;
| };
| return (
| <div
| className="wowjoy-input"
| style={{ width, margin, ...inputStyle }}>
| {type === 'textarea' ? (
| <textarea {...otherProps}
| rows={rows}
| name={name}
| disabled={disabled}
| onChange={this.handleChange}
| style={style}
| className="wowjoy-textarea__inner"
| />
| ) : (
| <input {...otherProps}
| type={type || 'text'}
| name={name}
| maxLength={maxLength}
| disabled={disabled}
| onChange={this.handleChange}
| onBlur={this.handleBlur}
| style={style}
| className="wowjoy-input__inner"
| />
| )}
| </div>
| );
| }
| }
|
| export default Input;
|
|
