2

Всем привет. При вводе текста, поле импута меняется с прозрачного на белый. Кусок взят с materializecss . Пишу на реакте. Мне кажется ответ где-то на поверхности, но я всю голову сломал уже. Код прилагаю, и скрины на всякий. Прошу камнями не кидаться, я новичок) заранее спасибо!

  <input
                        className='validate'
                        placeholder='search'
                        type='search'
                        value={this.state.search}
                        onChange={(e) =>
                            this.setState({ search: e.target.value })
                        }
                        onKeyDown={this.handleKey}
                    />

Было

Стало

7
  • явно теряются стили, я проверил в обычном html такого нет, а тут мало инфы для ответа, нужно минимально работающий пример 20 июл 2021 в 17:52
  • а что происходит тут this.handleKey ? 20 июл 2021 в 18:13
  • handleKey = (event) => { if (event.key === 'Enter') { this.props.searchOption(this.state.search, this.state.type); } }; Если вставить код в новый файл как человек снизу проверил, то работает. Но в общей картине проекта вылезает такая ерунда. Грешу на то, что кусок взят с подключенного materializecss.com . Возможно там что-то заложено. Видимо придется переписывать самому :/
    – Uasya88
    20 июл 2021 в 18:18
  • а как прописан класс в css validate ? 20 июл 2021 в 18:41
  • .validate { background-color: transparent; } я на самом деле многое перепробовал здесь. Результата вобще 0
    – Uasya88
    20 июл 2021 в 18:46

1 ответ 1

0

Это собственно не ответ, а пример того когда все работает, т.е. проблема не в указанном коде. Прошу камнями не кидаться, я не новичок) В комментарии такую демонстрацию не написать.

body{
  background-color: #2c5e82;
}
input.validate{
  background-color:transparent;
  color: white;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!-- Load our React component. -->
    <script type="text/babel">
      class MyInput extends React.Component {
         constructor(){
           super();
           this.state = { search: ""};
         }
         render(){
            return (
            <input
               className='validate'
               placeholder='search'
               type='search'
               value={this.state.search}
               onChange={(e) => this.setState({ search: e.target.value})}
               onKeyDown={this.handleKey}
             />
         )}
      }
      const App = () => {
        return (
          <MyInput/>
        );
      };

      ReactDOM.render(<App />, document.getElementById("root"));
    </script>
  </body>
</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.