JavaScriptは入力ボックスコンポーネントを実装します

Taro をインポートします。{ コンポーネント } から '@tarojs/taro';
'@tarojs/components' から View をインポートします。
'taro-ui' から AtIcon をインポートします。

'./index.scss' をインポートします。

/**
 * @description 入力ボックスコンポーネントを手動で実装します* @param placeholder: String 入力ボックスのプレースホルダーをカスタマイズします* @param onClickSearch: Function 入力コンテンツを取得するコールバック*/
クラスBaseInputはComponentを拡張します{
  コンポーネントマウント() {
    //入力ボックスのフォーカス document.querySelector('.search').focus();
  }

  ハンドルサーチ = () => {
    //入力ボックスの内容を取得します。const value = document.querySelector('.search').innerText;
    this.props.onClickSearch && this.props.onClickSearch(値);
  };

  与える（） {
    const { placeholder = '入力してください' } = this.props;
    戻る （
      <View className="base_input">
        <View className="my_search">
          <アイコン
            値="検索"
            カラー="#999"
            クラス名="検索アイコン"
            onClick={this.handleSearch}
          />
          {/* contenteditable は div が編集可能かどうかを制御できます*/
          <表示
            クラス名="検索"
            コンテンツ編集可能
            プレースホルダー={プレースホルダー}
          </表示>
        </表示>
      </表示>
    );
  }
}
デフォルトの BaseInput をエクスポートします。

.base_input {
  .my_search {
    ボックスのサイズ: 境界線ボックス;
    幅: 690ピクセル;
    高さ: 56px;
    行の高さ: 56px;
    境界線の半径: 28px;
    マージン: 12px 自動;
    背景: #f8f8f8;
    ディスプレイ: フレックス;
    .検索アイコン {
      幅: 30ピクセル;
      高さ: 30px;
      左マージン: 20px;
      右マージン: 18px;
    }
    。検索 {
      幅: 560ピクセル;
      パディング: 0px 18px;
      背景: #f8f8f8;
      高さ: 56px;
      色: #999;
      フォントサイズ: 28px;
      フォントの太さ: 400;
      &:empty::after {
        コンテンツ: attr(プレースホルダー);
      }
    }
  }
}