如何使用 React JS 在輸入字段的 css 邊框上添加文本？

Question

我想創建一個如下所示的輸入框，

使用 css，但是我無法找到任何關於如何在任何地方為輸入字段的邊框上的文本我嘗試使用但無法創建如上所示的輸入框的任何內容。 我非常卡在這里，如果有人可以建議創建一個如上所示的輸入字段，那將是一個很大的幫助。 先感謝您。

Answer 1

您可以使用react-native-material-textfield庫並需要一些自定義。 有一個renderLeftAccessory可以在這里像country code一樣呈現你的左視圖。 在此處嘗試示例代碼

import React, { Component } from 'react';
import {
  TextField,
  FilledTextField,
  OutlinedTextField,
} from 'react-native-material-textfield';

class Example extends Component {
  fieldRef = React.createRef();

  onSubmit = () => {
    let { current: field } = this.fieldRef;

    console.log(field.value());
  };

  formatText = (text) => {
    return text.replace(/[^+\d]/g, '');
  };

  render() {
    return (
      <OutlinedTextField
        label='Phone number'
        keyboardType='phone-pad'
        formatText={this.formatText}
        onSubmitEditing={this.onSubmit}
        ref={this.fieldRef}
      />
    );
  }
}