LINUX.ORG.RU
решено Форум — Web-development  

ReactJS, react-router отключает bootstrap-formhelpers?

 , , , reactrouter


0

1

Завожу связку из трех баранов в сабже.

маршруты: 

document.addEventListener('DOMContentLoaded', ()=> {
    var container = document.getElementById('MyAppContainer');
    ReactDOM.render(
        (
        <Router history={browserHistory}>
            <Route path={_HOME} component={MainApp}>
                <IndexRoute component={AccountApp}/>
                <Route path={_HOME+'/register'} component={RegistrationApp}/>
                <Route path={_HOME+'/login'} component={LoginApp}/>
            </Route>
        </Router>
        )
        ,
        container
    );
});

в index.html: 

<head>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/bootstrap-formhelpers.css" rel="stylesheet">


        <script type="text/javascript" src="js/bundle1.js"></script>
  
    </head>

<body>

        <div id="MyAppContainer"></div>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

        <script type="text/javascript" src="js/bootstrap-formhelpers.js"></script>
        <script type="text/javascript" src="js/bootstrap-formhelpers-phone.js"></script>
    </body>

в RegistrationApp рендерится следующий кусок: 

<input
 ref="username"
 name='username'
 type='text'
 className='form-control bfh-phone'
 placeholder='Phone number'
 data-format="+7 (ddd) ddd-dddd"
 onChange={this.onChange}
/>

вот в такой связке не работает шаблонизатор input-поля.

А если я убираю все маршруты и рендерю на главную статичный RegistrationApp, то все работает.

В чем может быть дело? почему такое странное поведение?

★★★★★

может быть react-router прячет от инициализации инициализацию этого jQuery-компонента?

  $(document).ready( function () {
    $('form input[type="text"].bfh-phone, form input[type="tel"].bfh-phone, span.bfh-phone').each(function () {
      var $phone;

      $phone = $(this);

      $phone.bfhphone($phone.data());
    });
  });
bvn13 ★★★★★
() автор топика

stackoverflow пишет, что нужно делать так:

componentDidMount() {

		let phoneInput = $(ReactDOM.findDOMNode(this.refs.username));
		phoneInput.bfhphone(phoneInput.data());

	}

но у меня ошибка, что phoneInput.bfhphone не является функцией.

Смотрю отладчиком - оно пустое.

bvn13 ★★★★★
() автор топика

похоже, этот плагин как-то проблематично подключаеся к react-у.

сделал, используя плагин jquery-mask-plugin: 

> npm install --save jquery jquery-mask-plugin


//ES6
import $ from 'jquery';
import 'jquery-mask-plugin';

componentDidMount() {
        let phoneInput = $(ReactDOM.findDOMNode(this.refs.username));
        phoneInput.mask('+7 (000) 000-0000');
    }
bvn13 ★★★★★
() автор топика
Последнее исправление: bvn13 (всего исправлений: 1)
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Web-development