Блог

Я пытаюсь использовать css строки поиска из code pen. Я использовал их точный код, но строка поиска, похоже, действительно глючит на react.

Вот code sandbox для лучшего ознакомления. https://codesandbox.io/s/sad-moser-mdxmd?file=/src/Dashboard.js

Вот код, который я использую в настоящее время.

 <div class="wrap">
    <div class="search">
      <input type="text" class="searchTerm" id="input_text"></input>
      <button type="submit" class="searchButton">
        <i class="fa fa-search"></i>
      </button>
    </div>
  </div>
 

 .search {
  width: 100%;
  position: center;
  display: flex;
}

.searchTerm {
  width: 100%;
  border: 3px solid #00b4cc;
  border-right: none;
  padding: 5px;
  height: 20px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #9dbfaf;
}

.searchTerm:focus {
  color: #00b4cc;
}

.searchButton {
  width: 40px;
  height: 36px;
  border: 1px solid #00b4cc;
  background: #00b4cc;
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
}

/*Resize the wrap to see the search bar change!*/
.wrap {
  width: 30%;
  position: flex;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 

Я хочу, чтобы строка поиска выглядела так:

Это ссылка на код, который я пытался использовать.

https://codepen.io/huange/pen/rbqsD

Измените css для .перенесите в это —

 .wrap {
    /* width: 30%; */
    display: flex;
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
}
 

Конечно, вы имели display: flex; в виду, а не positon: flex;

Объяснение

Во-первых, flex предназначен для отображения, а не для позиции. Вы можете использовать оба варианта вместе, но они, вероятно, взаимодействуют не так, как вы думаете.

Позиция строго относится к тому, где элемент находится на странице (либо относительно того, где он был бы в естественном потоке, абсолютно по сравнению с ближайшим родительским элементом с явной позицией, либо фиксирован где-то на экране).

Отображение определяет, как расположены элементы (или расположены ли они вообще). Я не буду здесь вдаваться во все возможности отображения, но block, inline-block, inline и flex являются наиболее популярными, и вы можете легко узнать о них с помощью поиска в Google или Youtube.

Чтобы ответить на ваш вопрос, вам нужно удалить position из вашего .оберните класс, а также все элементы, связанные с вашей позицией. Затем добавьте поля для центрирования и верхнего и нижнего пространства (помните, что автоматическое выделение полей для левого и правого будет центрировать его). Затем, чтобы делать все по-реактивному, вам нужно установить react-fontawesome с помощью npm и использовать подобный значок для наиболее естественной и оптимальной производительности. Вот ссылка на то, как это сделать, с примерами использования внизу: https://fontawesome.com/how-to-use/on-the-web/using-with/react

Вам также понадобится метка-заполнитель, если вы хотите, чтобы ваша строка поиска была идентичной строке в CodePen. Это даст вам исчезнувший текст до того, как пользователь начнет печатать. Я добавил его в качестве реквизита во входных данных.

Наконец (и это не связано с внешним видом), вы, вероятно, захотите настроить двустороннюю привязку к вашим входным данным, чтобы позже вы действительно могли что-то сделать со значением. Я думаю, что мой код показывает, что происходит, достаточно просто, но в основном у вас просто есть значение в вашем состоянии, которое привязано к вашему вводу. Когда входные данные изменяются, это состояние обновляется, затем, когда входные данные передаются повторно, оно считывает свое значение из состояния. Это дает вам доступ к значению в других частях вашего кода.

CSS

 .search {
    width: 100%;
    position: center;
    display: flex;
}

.searchTerm {
    width: 100%;
    border: 3px solid #00b4cc;
    border-right: none;
    padding: 5px;
    height: 20px;
    border-radius: 5px 0 0 5px;
    outline: none;
    color: #9dbfaf;
}

.searchTerm:focus {
    color: #00b4cc;
}

.searchButton {
    width: 40px;
    height: 36px;
    border: 1px solid #00b4cc;
    background: #00b4cc;
    text-align: center;
    color: #fff;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 20px;
}

/*Resize the wrap to see the search bar change!*/
.wrap {
    width: 30%;
    margin: 20px auto;
    /* change the margin to move where it is on the page */
}

 

JSX

 import {Component} from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSearch } from '@fortawesome/free-solid-svg-icons';

class Foo extends Component {
state = {
    input: '',
};

render() {
    return (
        <div class="wrap">
            <div class="search">
                <input
                    placeholder="What are you looking for?"
                    value={this.state.input}
                    onChange={(event) => this.setState({ input: event.target.value })}
                    type="text"
                    className="searchTerm"
                    id="input_text"
                ></input>
                <button type="submit" className="searchButton">
                    <FontAwesomeIcon icon={faSearch} />
                </button>
            </div>
        </div>
    );
  }
}

 

Не для того, чтобы продавать себя здесь, но если вы хотите поиграть с некоторыми из этих свойств в интерактивном режиме, вот приложение, которое я создал специально для такого сценария: https://csspressme.web.app /