1

Тег input для ввода номера телефона, id которого равен "#phone". Нужно, чтобы при вводе автоматически ставился знак "-". (Например: +7-987-123-45-67)

Нашла jQuery плагин "masked input". Библиотеку jQuery и сам плагин подключила. Далее перетащила код jQuery, но код не видит id "#phone".

Что не так? Или из-за чего он может не видеть айдишник? Воркаю в React'e.

render(){
    const {fields:{adress, cost_type, field_type, time, phone}, handleSubmit} = this.props;

 return(

      <section id="create-field" className="container">

            <h1> Создание поля </h1>

            <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>

            <div className="form-group">
                <div className="row">
                    <div className="adress">
                       <div className="col-md-3">
                            <p>Адрес:</p>
                       </div>
                       <div className="col-md-6">
                            <input type="text" className="form-control" {...adress} placeholder="Улица"/>
                       </div>
                    </div>
                </div>

                <div className="row">
                    <div className="cost_type">
                        <div className="col-md-3">
                            <p>Доступ к полю:</p>
                        </div>
                        <div className="col-md-3">
                            <select>
                                <option>Выберите тип</option>
                                <option>Платный</option>
                                <option>Бесплатный</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div className="row">
                    <div className="field_type">
                        <div className="col-md-3">
                           <p>Тип поля: </p>
                        </div>
                        <div className="col-md-3">
                            <select>
                                <option>Выберите тип</option>
                                <option>Открытое</option>
                                <option>Закрытое</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div className="row">
                    <div className="time">
                        <div className="col-md-3">
                            <p>Рабочее время: </p>
                        </div>
                        <div className="col-md-2">
                            <div className="start-work">
                                <input type="time" className="form-control" {...time} placeholder="00:00"/>
                            </div>
                        </div>
                        <div id="dash" className="col-md-1">
                            <p> - </p>
                        </div>
                        <div className="col-md-2">
                            <div className="over-work">
                                <input type="time" className="form-control" {...time} placeholder="00:00"/>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="row">
                    <div className="phone">
                        <div className="col-md-3">
                            <p>Телефон: </p>
                        </div>
                        <div className="col-md-6">
                            <input id="phone" type="text" className="form-control" {...phone} />
                        </div>
                    </div>
                </div>
            </div>
                <button type="submit" className="btn btn-success">Создать</button>
            </form>
          <script type="text/javascript" src="src/public/js/jquery-3.1.1.js"></script>
          <script type="text/javascript" src="src/public/js/jquery-3.1.1.min.js"></script>
          <script type="text/javascript" src="src/public/js/jquery.maskedinput.js"></script>
          <script type="text/javascript" src="src/public/js/jquery.maskedinput.min.js"></script>
          <script>
              jQuery(function($){
              $("#phone").mask("+7 (999) 999-9999")
          });
          </script>
      </section>
  );
  }
}
1
  • уберите дубли скриптов jQuery и maskedinput из html
    – user176262
    13 фев 2017 в 15:02

3 ответа 3

1

Такой код нужно писать через ref...

componentDidMount() {
  $(this.phoneInput).mask('+7 (999) 999-9999');
}

// Обязательно!
componentWillUmount() {
  $(this.phoneInput).umask();
}

render() {
  return (
    <div>
      <input ref={(i) => this.phoneInput = i} />
    </div>
  )
}

Но конечно лучше не использовать jQuery с React, лишнее. Есть к примеру https://github.com/BankFacil/vanilla-masker

Писать script так же ну нужно в 99%. Вынесите просто в статичное подключение. Либо используйте решения типа https://github.com/yariv/ReactScriptLoader

0

Возможно, в Вашем тэге не хватает атрибута type и браузер попросту не выполняет этот код.

Еще один из вариантов - на момент выполнения скрипта, такого элемента еще/уже нет. Почему - лучше спросить у React'а

2
0

В React лучше не использовать JQuery. Вот решение для React https://www.npmjs.com/package/react-input-mask

Ваш ответ

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

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