Aynı sayfada aynı ReactJS form bileşeni ile çalışma

Question

ReaJS konusunda oldukça yeniyim ve tek bir sayfada aynı form bileşenine sahip olmanın en iyi yolunun ne olduğunu merak ediyorum. Lütfen akı kullandığımı ve bileşenlerin bir mağaza ile konuştuğunu unutmayın. Örneğin

: < SearchForm /> < SearchForm />

Ben formu 1. giriş alanını kullanmaya çalıştığınızda, Form 2. Aynı anda formu 1. değeri alır. Sorunun mağazadan geldiğini düşünüyorum. bileşenler aynı mağazaya konuşuyor ve mağaza tüm bileşenleri bir kerede güncelliyor.

Bu sorunu nasıl çözebilirim?

, şu ana kadar kullandığım kod.

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; 

Yardımlarınız için şimdiden teşekkür ederiz.

bileşen saklanan value2 ile

Eğer value1 ile <SearchForm />#1 sahip olmasını sağlar

ve <SearchForm />#2 (this.state üzerinden erişilen) iç durumu verilerini korumak:

Answer 1

tepki durum bilgisi bileşeni vardır this.state

Bir form oluşturmak için şunu kontrol edin: https://facebook.github.io/react/docs/forms.html

Answer 2

Kesinlikle bileşenlerinizi uygulamanız genelinde birden çok kez tekrar kullanabilirsiniz. Eğer herhangi bir devlet olmasını istemiyoruz 1.If

: En durumda

form geri arama pervane olarak işleyici göndermek sağlayabilir. Arama formunuzda herhangi bir durumu korumak istemiyorsanız. formun 2

<Searchform submitHandler={searchForm2Handler}/> 

için ve arama formu bileşeni içinde formu 1

<Searchform submitHandler={searchForm1Handler}/> 

için örn eyaletlerinde

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

2. Bu yaklaşımla her ile

ko mponent'in kendilerine özel olacak ayrı ayrı devletleri olacaktır.İşte

örnek bileşeni bu

Şimdi

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> 
     ) 
    } 
} 

formu Öyle görünüyor 2

<Searchform/> 

Answer 3

için forma 1

<Searchform/> 

için onlara

kullanmak göstermek için aşağıdadır mağaza onl y bir form için - arama değerini içeren bir durum kaydeder.
Bu formu iki kez oluşturursanız, her iki form da her değişiklik için aynı durumu alır. Yani tasarımın birbirinin kesin bir kopyası. Bir form değişirse, her iki form da değişikliği fark eder ve her iki form da aynı durumu mağazadan alır.

öneririm Bunu düzeltmek için:

• değişim o figüran olarak her form kendi kimliğiyle, çoklu formlar için
• geçiş bu Kimliği her bir devlet kaydedebilirsiniz böylece mağaza, Örneğin
• <SearchForm formID='form1'/> <SearchForm formID='form2'/> böyle <SearchField> iç <SearchField>
• olarak, bileşen sadece formID kendi itibaren durumu sunan emin olun aşağı formun tüm çocuklara figüran olarak formID geçmektedir. Muhtemelen getStateFromStores() yönteminin kendisini güncellemeniz gerekir. Veya <SearchField>'un içinde, alakalı öğeleri filtreleyerek önce setState()'a aktarın.
• Bileşeniniz bir şeylerin değiştiğini depoladığında (sanırım bu SearchResultsUtils.search(e.target.value);'un yaptığı gibi), o zaman formID'u da geçirmeniz gerekir. Böylece mağaza hangi formun güncelleneceğini bilir.

PS: Ben kodunuzu componentDidMount() bazı çizgiler eksik olduğunu düşündüğünüz: Değişiklikleri saklamak için dinleyici kaldırmak için kod var, ancak kod dinleyici eksik ekleyin. _onChange() yöntemini çağırmak için kod bileşeninizden eksik.