import React, {PropTypes} from "react"


const SearchBox = React.createClass({
  propTypes: {
    query: PropTypes.string,
    onQueryChange: PropTypes.func,
  },
  onInputChange(event) {
    this.props.onQueryChange(event.target.value)
  },
  render() {
    return (
      <div className="panel panel-default">
        <div className="panel-heading">
          <h3 className="panel-title">Recherche</h3>
        </div>
        <div className="panel-body">
          <div className="form-group">
            <label htmlFor="search-box-input">
              Nom
            </label>
            <input
              className="form-control"
              id="search-box-input"
              onChange={this.onInputChange}
              placeholder="Nom"
              value={this.props.query}
            />
          </div>
        </div>
      </div>
    )
  },
})


export default SearchBox

import React, {PropTypes} from "react"


const SearchBox = React.createClass({
  propTypes: {
    query: PropTypes.string,
    onQueryChange: PropTypes.func,
  },
  handleSubmit(event) {
    event.preventDefault();
    this.props.onQueryChange(this.input.value)
  },
  render() {
    return (
      <div className="panel panel-default">
        <div className="panel-heading">
          <h3 className="panel-title">Recherche</h3>
        </div>
        <div className="panel-body">
          <form onSubmit={this.handleSubmit}>
            <div className="form-group">
              <label htmlFor="search-box-input">
                Nom
              </label>
              <input
                className="form-control"
                defaultValue={this.props.query}
                id="search-box-input"
                placeholder="Nom"
                ref={(input) => this.input = input}
              />
            </div>
            <button className="btn btn-primary">Rechercher</button>
          </form>
        </div>
      </div>
    )
  },
})


export default SearchBox

Use a search button to reduce computations on each char typed
Use a search button to reduce computations on each char typed
