JavaScript implementiert eine Eingabefeldkomponente

importiere Taro, {Komponente} von '@tarojs/taro';
importiere { Ansicht } aus '@tarojs/components';
importiere { AtIcon } von „taro-ui“;

importiere './index.scss';

/**
 * @description Manuelles Implementieren einer Eingabefeldkomponente* @param placeholder: String Passen Sie den Platzhalter im Eingabefeld an* @param onClickSearch: Funktion Rückruf zum Abrufen des Eingabeinhalts*/
Klasse BaseInput erweitert Komponente {
  componentDidMount() {
    //Fokus auf Eingabefeld document.querySelector('.search').focus();
  }

  handleSearch = () => {
    //Inhalt des Eingabefelds abrufen const value = document.querySelector('.search').innerText;
    this.props.onClickSearch und this.props.onClickSearch (Wert);
  };

  rendern() {
    const { Platzhalter = 'Bitte eingeben' } = this.props;
    zurückkehren (
      <Klassenname anzeigen="base_input">
        <View className="meine_suche">
          <AtIcon
            Wert="Suche"
            Farbe = "999"
            Klassenname = "Suchsymbol"
            beiKlick={this.handleSearch}
          />
          {/* contenteditable kann steuern, ob ein Div bearbeitet werden kann*/}
          <Ansicht
            Klassenname="Suche"
            Inhalt editierbar
            Platzhalter={Platzhalter}
          ></Anzeigen>
        </Anzeigen>
      </Anzeigen>
    );
  }
}
Standard-BaseInput exportieren;

.base_input {
  .meine_suche {
    Box-Größe: Rahmenbox;
    Breite: 690px;
    Höhe: 56px;
    Zeilenhöhe: 56px;
    Rahmenradius: 28px;
    Rand: 12px automatisch;
    Hintergrund: #f8f8f8;
    Anzeige: Flex;
    .Suchsymbol {
      Breite: 30px;
      Höhe: 30px;
      Rand links: 20px;
      Rand rechts: 18px;
    }
    .suchen {
      Breite: 560px;
      Polsterung: 0px 18px;
      Hintergrund: #f8f8f8;
      Höhe: 56px;
      Farbe: #999;
      Schriftgröße: 28px;
      Schriftstärke: 400;
      &:leer::nach {
        Inhalt: Attr (Platzhalter);
      }
    }
  }
}