ReactJS bootstrap form без обновления страницы

Question

У меня есть форма в моем самом базовом приложении React, где я хочу разрешить пользователю вводить текст и создавать свое имя пользователя, обновляя состояние. Однако, когда нажата кнопка «ОК», созданное имя пользователя появляется на странице примерно полсекунды, тогда страница автоматически обновляет и восстанавливает состояние по умолчанию. Это происходит только тогда, когда кнопка содержится внутри элемента формы. Он отлично работает, и страница не обновляется, когда я удаляю элемент формы, однако я не хочу жертвовать стилем и форматированием формы бутстрапа. Вот мой метод визуализации:

render() { 
    return (
    <div class="container-fluid text-center"> 
     <form class="form-inline"> 
      <input type="text" class="form-control" placeholder="UserName"/> 
      <button onClick={this.createUser.bind(this)} class="btn btn-primary">OK</button> 
     </form> 
     <h1>User: {this.state.userName}</h1> 
     <h1>Points: {this.state.points}</h1> 
    </div> 
) 
} 

Answer 1

Ваша кнопка не имеет атрибут типа, поэтому по умолчанию будет представлять (см this page). Это означает, что при нажатии на кнопку вызывается обработчик onClick, но действие браузера по умолчанию для отправки формы также произойдет.

Попробуйте указать тип кнопки вместо:

<button type="button" onClick={this.createUser.bind(this)} class="btn btn-primary">OK</button> 

Кроме того, если специально не нужен элемент формы, можно попробовать изменить его к <div>. Стиль самозагрузки form-inline не требует формы, как указано в documentation по форме заголовка Встраиваемый:

Добавить .FORM-инлайн в форму (которая не должна быть <form>) ...