7 examples of 'react text box' in JavaScript

20
render() {
21
  return (
22
    <div style={styles.formElement}>
23
      <label style={styles.label} htmlFor={this.props.type}>
24
        {this.props.label}
25
      </label>
26
      <input
27
        id={this.props.type}
28
        style={{ ...styles.textbox, lineHeight: '100%' }}
29
        type={this.props.type}
30
        value={this.state.value}
31
        onChange={this.handleChange}
32
      />
33
      {this.props.children &&
34
        React.cloneElement(this.props.children, {
35
          password: this.state.value,
36
        })}
37
    </div>
38
  );
39
}

6
render() {
7
  const { secure, multiline, children, ...otherProps } = this.props;
8
9
  if (secure) {
10
    return React.createElement(PasswordEntry, otherProps, children);
11
  }
12
13
  if (multiline) {
14
    return React.createElement(MultilineEntry, otherProps, children);
15
  }
16
17
  return React.createElement(Entry, otherProps, children);
18
}

9
function TextboxWidget(props) {
10
  const { widget, canEdit } = props;
11
  const [text, setText] = useState(widget.text);
12
13
  const editTextBox = () => {
14
    TextboxDialog.showModal({
15
      text: widget.text,
16
      onConfirm: newText => {
17
        widget.text = newText;
18
        setText(newText);
19
        return widget.save();
20
      },
21
    });
22
  };
23
24
  const TextboxMenuOptions = [
25
    <Menu.Item key="edit" onClick={editTextBox}>
26
      Edit
27
    </Menu.Item>,
28
  ];
29
30
  if (!widget.width) {
31
    return null;
32
  }
33
34
  return (
35
    <Widget {...props} menuOptions={canEdit ? TextboxMenuOptions : null} className="widget-text">
36
      <HtmlContent className="body-row-auto scrollbox t-body p-15 markdown">{markdown.toHTML(text || "")}</HtmlContent>
37
    </Widget>
38
  );
39
}

43
function Text() {
44
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
45
46
  switch (Platform.default.current) {
47
    case 'alipay':
48
      return React.createElement(index$1.Text, props);
49
50
    case 'wechat':
51
      return React.createElement(index$2.Text, props);
52
53
    case 'toutiao':
54
      return React.createElement(Text$1.default, props);
55
  }
56
}

18
render() {
19
  const {children, ...props} = this.props;
20
  return React.createElement('Text', props, children);
21
}

61
render() {
62
    const inputStyle = {
63
        position: 'absolute',
64
        top: this.props.bBox.y,
65
        left: this.props.bBox.x,
66
        width: this.props.bBox.w,
67
        height: this.props.bBox.h,
68
    };
69
70
    if (this.state.display === false) {
71
        inputStyle.display = 'none';
72
    }
73
74
    Object.assign(inputStyle, this.props.styles);
75
76
    return (
77
        <input
78
            className='text-input'
79
            ref={(i) => {
80
                this.textInput = i;
81
            }}
82
            style={inputStyle}
83
            onChange={this.onChange}
84
            onBlur={this.onBlur}
85
            value={this.state.value}
86
        />
87
    );
88
}

15
public render() {
16
    let className = "group";
17
    if (this.props.invalid) {
18
        className += " invalid";
19
    }
20
    if (this.props.small) {
21
        className += " small";
22
    }
23
    let name;
24
    let list;
25
    if (this.props.list != null) {
26
        name = this.props.list[0];
27
        list = <datalist id={name}>
28
            {this.props.list[1].map((n, i) => <option key={i} value={n} />)}
29
        </datalist>;
30
    }
31
32
    return (
33
        <div className={className}>
34
            <input
35
                list={name}
36
                type="text"
37
                required
38
                className={this.props.className}
39
                value={this.props.value}
40
                onChange={this.props.onChange}
41
                onBlur={this.props.onBlur}
42
            />
43
            {list}
44
            <span className="bar"></span>
45
            <label>{this.props.label}</label>
46
        </div>
47
    );
48
}