Question Réagir: Comment naviguer via clickHandlers?


Je viens de commencer à apprendre React et je suis coincé dans le scénario suivant.

Il y a un champ de saisie et en cliquant sur le bouton de recherche, il prend la valeur d'entrée et redirige vers / recherche / requête-recherche / action partielle

J'ai configuré le chemin, défini l'itinéraire vers la vue correcte. Et, j'ai pu frapper ce chemin en utilisant des liens href. Mais mon exigence réelle est d'avoir un bouton et amener l'utilisateur à ce chemin via le gestionnaire onClick.

J'ai beaucoup cherché et trouvé de multiples solutions (vagues) comme, Reapper-Brows-Mixin, etc. Mais je ne trouvais aucune documentation sur ses utilisations.

Est-ce que quelqu'un peut-il me montrer la bonne direction?


15
2018-01-31 09:27


origine


Réponses:


Je vais faire l'hypothèse que vous ne construisez pas une application à une seule page et que vous utilisez quelque chose comme le routeur React. Et que ce que vous devez faire est simplement naviguer vers une URL basée sur l'entrée.

Il y a deux manières de faire selon que vous souhaitiez:

  1. Style et <a> comme bouton:
var Component = React.createClass({
  getInitialState: function() { return {query: ''} },
  queryChange: function(evt) {
    this.setState({query: evt.target.value});
  },
  _buildLinkHref: function() {
    return '/search/'+this.state.query+'/some-action';
  },
  render: function() {
    return (
      <div className="component-wrapper">
        <input type="text" value={this.state.query} />
        <a href={this._buildLinkHref()} className="button">
          Search
        </a>
      </div>
    );
  }
});

De cette façon, vous conservez la requête (valeur de l'entrée) dans l'état. Et chaque fois que l'entrée change, le href du lien est automatiquement modifié.

  1. Utiliser un <button> et rediriger par programme:
var Component = React.createClass({
  getInitialState: function() { return {query: ''} },
  queryChange: function(evt) {
    this.setState({query: evt.target.value});
  },
  handleSearch: function() {
    window.location = '/search/'+this.state.query+'/some-action';
  },
  render: function() {
    return (
      <div className="component-wrapper">
        <input type="text" value={this.state.query} />
        <button onClick={this.handleSearch()} className="button">
          Search
        </button>
      </div>
    );
  }
});

De cette façon, vous gérez la redirection par programmation en définissant l’emplacement souhaité sur window.location.


27
2018-02-02 06:35



Ajout de la réponse existante peut avoir besoin de lier votre fonction comme suit:

constructor(props) {
    super(props);
    this.handleSearch = this.handleSearch.bind(this);
}

2
2017-07-28 23:59