Arbeiten mit der gleichen ReactJS Formularkomponente auf der gleichen Seite

Question

Ich bin ziemlich neu zu reagierenJS und ich frage mich, was ist der beste Weg, mit der gleichen Formularkomponente auf einer einzigen Seite zu behandeln. Bitte beachten Sie, dass ich Flussmittel verwende und die Komponente mit einem Geschäft spricht.

Zum Beispiel: < Search /> < Search />

Wenn ich versuche, Form # 1 Eingabefeld zu verwenden, Form # 2 wird den Wert von der Form # 1 zur gleichen Zeit. Ich denke, das Problem kommt aus dem Laden. Die Komponenten sprechen mit demselben Geschäft, und das Geschäft aktualisiert alle Komponenten gleichzeitig.

Wie kann ich mit diesem Problem umgehen?

hier ist der Code, den ich bisher habe.

const SearchField = React.createClass({ 

propTypes: { 
    isSearchActivated: React.PropTypes.bool.isRequired, 
}, 

_onChange() { 
    var previousHighlightedIndex = this.state.highlightedIndex; 
    this.setState(getStateFromStores(), function() { 
     if (previousHighlightedIndex == 0 && 
       this.state.highlightedIndex == -1) { 
      this.refs.SearchBar.selectAll(); 
     } 
    }); 
}, 

componentDidMount() { 
    if (window.location.pathname == "/" && !Modernizr.mq("screen only and (max-width: 768px)")) { 
     $(ReactDOM.findDOMNode(this.refs.SearchBar)).find("input").focus(); 
    } 
}, 

componentWillUnmount() { 
    SearchResultStore.removeChangeListener(this._onChange); 
}, 

onChangeSearchString(e) { 
    SearchResultsUtils.search(e.target.value); 
}, 

onBlur(e) { 
    var self = this; 
    var cb = function() { 
     if (!self.state.selectedResult && self.state.results.length) { 
      self.handleSelectedResult(0); 
     } 

     SearchResultsActions.disallowResultsDisplay(); 
    }; 
    if($(".search-bar").hasClass("active")) { 
     $(".search-bar.active").removeClass("active"); 
    } 
}, 

onFocus(e) { 
    $(ReactDOM.findDOMNode(this.refs.SearchBar)).closest(".search-bar").addClass("active"); 
}, 

handleSubmit() { 
    var self = this; 
}, 

render() { 
    var className = "search-bar clearfix"; 

    return (
     <div className={className}> 
      <div className="search-bar-search"> 
       <SearchBar 
        searchString={this.state.searchString} 
        onChange={this.onChangeSearchString} 
        onKeyDown={this.onKeyDownSearchString} 
        onFocus={this.onFocus} 
        onBlur={this.onBlur} 
        placeholder="Search Meds or Conditions" 
        ref="SearchBar" /> 
      </div> 

      <SearchButton 
       handleSubmit={this.handleSubmit} /> 
     </div> 
    ); 
}, 
}); 

module.exports = SearchField; 

Danke für die Hilfe im Voraus.

Answer 1

Reagieren hat Stateful Komponenten:

eine Komponente kann interne Zustandsdaten beibehalten (via this.state zugegriffen)

, die Sie mit <SearchForm />#1value1 haben können, und mit <SearchForm />#2value2 gespeichert in this.state

Um ein Formular zu erstellen, überprüfen Sie Folgendes: https://facebook.github.io/react/docs/forms.html

Answer 2

Sie können Ihre Komponenten auf jeden Fall mehrfach in Ihrer Anwendung wiederverwenden.

1. Wenn Sie jeder Staat haben nicht wollen:

In Ihrer Situation können Sie Formular-Handler als Callback-prop einreichen bieten. Wenn Sie in Ihrem Suchformular keinen Status beibehalten möchten. zB Für Form 1

<Searchform submitHandler={searchForm1Handler}/> 

Für Form 2

<Searchform submitHandler={searchForm2Handler}/> 

und Innen Ihre Suchformular Komponente

render(){ 
    return (
    <form id="searchform" onSubmit={this.props.submitHandler} role="form"> 
     // other input and buttons 
    </form> 
    ) 
} 

2. Mit Staaten

Mit diesem Ansatz jeder co Die Komponente wird ihre eigenen separaten Zustände haben, die für sie privat sind.Hier

ist Probenkomponente zu veranschaulichen diese

import React ,{ Component } from 'react'; 

export default class SearchForm extends Component { 

    constructor(props){ 
     super(props); 
     this.state = { 
      searchTerm : '' 
     }; 
     this.submit = this.submit.bind(this); 
     this.changeSearchTerm = this.changeSearchTerm.bind(this); 
    } 

    submit(e){ 

     e.preventDefault(); 

     let searchTerm = this.state.searchTerm; 
     //Now perform some action based on search term you get 
    } 

    changeSearchTerm(e){ 
     this.setState({searchTerm :e.target.value}); 
    } 

    render(){ 

     return(
      <div> 
       <div className="row"> 
        <div className="col-md-12"> 
         <form role="form" className="form-horizontal" onSubmit={this.submit}> 
         <fieldset> 
          <div className="form-group"> 
          <div className="col-sm-6"> 
           <input id="st" type="text" placeholder="search term" onChange={this.changeSearchTerm} value={this.state.searchTerm} required autofocus/> 
          </div> 
         </div> 
         <div className="form-group"> 
          <div className="col-xs-12 text-center"> 
           <button className="btn"> 
           Search 
           </button> 
          </div> 
          </div> 
         </fieldset> 
         </form> 
        </div> 
       </div> 
      </div> 
     ) 
    } 
} 

Jetzt ihnen

Für Form 1

<Searchform/> 

Für Form 2

<Searchform/> 

Answer 3

Es sieht zu verwenden wie Ihr nur speichern y speichert einen Zustand - einschließlich Suchwert - für ein Formular.
Wenn Sie dieses Formular zweimal rendern, rufen beide Formulare bei jeder Änderung denselben Status ab. Sie sind also eine exakte Kopie von einander. Wenn sich ein Formular ändert, beachten beide Formulare die Änderung, und beide Formulare rufen den genau gleichen Status aus dem Speicher ab.

Um dies zu beheben, würde ich vorschlagen:

• Änderung der Laden so, dass es einen Zustand für mehrere Formulare speichern können, die jeweils mit einer eigenen ID
• Pass diese ID zu jeder Form als Stütze, z.B <SearchForm formID='form1'/> <SearchForm formID='form2'/>
• passieren die formID nach unten als Stütze für alle Kinder in der Form, wie <SearchField>
• innerhalb der <SearchField>, stellen Sie sicher, nur die Komponente Zustand von seinem eigenen formID macht. Wahrscheinlich müssen Sie die Methode getStateFromStores() selbst aktualisieren. Oder innerhalb <SearchField> filtern Sie relevante Sachen zuerst aus, bevor Sie es an setState() weiterleiten.
• Wenn Ihre Komponente informiert den Laden, dass etwas geändert hat (ich denke, das ist, was SearchResultsUtils.search(e.target.value); tut), dann müssen Sie auch die formID übergeben. So wird der Laden wissen, welches Formular zu aktualisieren ist.

PS: Ich denke, Ihr Code ein paar Zeilen in componentDidMount() fehlt: Sie Code haben den Hörer entfernen Änderungen zu speichern, aber Ihr Code der Hörer fehlt hinzuzufügen. Der Code zum Aufrufen der _onChange()-Methode fehlt in Ihrer Komponente.