The input tag for entering the phone number whose id is "#phone". It is necessary that when entering, the sign "-" is automatically put. (For example: + 7-987-123-45-67)

Found jQuery plugin "masked input". The jQuery library and the plugin itself is connected. Then I dragged the jQuery code, but the code does not see the id "#phone".

What's wrong? Or because of what he can not see the IT specialist? I roar in 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> ); } }
  • remove duplicate jQuery and maskedinput scripts from html - Igor

3 answers 3

Such code needs to be written through ref ...

 componentDidMount() { $(this.phoneInput).mask('+7 (999) 999-9999'); } // Обязательно! componentWillUmount() { $(this.phoneInput).umask(); } render() { return ( <div> <input ref={(i) => this.phoneInput = i} /> </div> ) }

But of course it is better not to use jQuery with React, superfluous. There is for example https://github.com/BankFacil/vanilla-masker

Write the script as well, you need to 99%. Take out just a static connection. Or use solutions like https://github.com/yariv/ReactScriptLoader

    Perhaps your tag lacks the type attribute and the browser simply does not execute this code.

    Another option is that at the time of the execution of the script, there is still no such element. Why is it better to ask React?

    • I think I see <input id = "phone" type = "text" className = "form-control" {... phone} /> - Nikita Rassamahin
    • I meant the type attribute of the script tag type = "text / javascript" - Lesha Marchenkovsky

    React is better not to use jQuery. Here is the solution for React https://www.npmjs.com/package/react-input-mask