検索フォームの下に最後に検索されたアイテムを表示

Question

私はreduxフォームを使用して開発された検索フォームを持っています。私はフォームにルーティングするためにルータを使用しています。私は検索フォームからデータを提出し、同じフォームに戻った後、ユーザーが検索場所の入力ボックスをクリックするたびに以前に検索されたデータのリストを表示したい。どうすればいいですか？画像ここ

で

などは私のコードは、あなたが何をすべき

const Banner = (props) => (
    <Router> 
    <div className="container banner"> 
     <ServiceType /> 
      <div className="row"> 
      <Match exactly pattern="/" location={props.location} component={Apartamentos} /> 
      <Match pattern="/apartamentos" component={Apartamentos} /> 
      <Match pattern="/coche" component={Coche} /> 
      <Match pattern="/experiencias" component={Experiencias} /> 
      </div> 
    </div> 
    </Router> 
); 


const renderGeoSuggestField = ({ 
    input, 
    location 
}) => (
    <Geosuggest 
    fixtures={fixtures} 
    initialValue={input.value.label} 
    inputClassName="form-control destino" 
    onChange={(value) => input.onChange(value)} 
    onSuggestSelect={(value) => input.onChange(value)} 
    radius="20" 
    /> 
); 

const renderDateRangePicker = ({ 
    input, 
    focusedInput, 
    onFocusChange, 
}) => (
    <DateRangePicker 
    onDatesChange={(start, end) => input.onChange(start, end)} 
    startDate={(input.value && input.value.startDate) || null} 
    endDate={(input.value && input.value.endDate) || null} 
    minimumNights={0} 
    /> 
); 

class ServiceType extends Component { 
render() { 
    return(
    div className="col-xs-12 col-sm-12 col-md-4 serviceImg"> 
     <Link to="/apartamentos"> 
     <img 
      src={imageUrl} 
      alt="apartamentos" 
      className="img-responsive" 
     /> 
     <h4>APARTAMENTOS</h4> 
     </Link> 
    </div> 
); 
} 
} 


class Apartamentos extends Component { 
    render() { 
    const { focusedInput } = this.state; 
    return (
     <div className="form-box text-center"> 
     <div className="container"> 
      <form className="form-inline"> 
      <div className="form-group"> 
       <Field 
       name='geoSuggest' 
       component={renderGeoSuggestField} 
       onChange={(value) => this.onChange(value)} 
       onSuggestSelect={(suggest) => this.onSuggestSelect(suggest)} 
       location={new google.maps.LatLng(53.558572, 9.9278215)} 
       /> 
      </div> 
      <div className="form-group"> 
       <Field 
       name="daterange" 
       onFocusChange={this.onFocusChange} 
       focusedInput={focusedInput} 
       component={renderDateRangePicker} 
       /> 
      </div> 
      <div className="form-group"> 
       <Field 
       name="persona" 
       component="select" 
       > 
       <option>1 persona</option> 
       <option>2 personas</option> 
       </Field> 
      </div> 
      <button type="submit" className="btn btn-default buscar">BUSCAR</button> 
      </form> 
     </div> 

     </div> 
    ); 
    } 
} 

const ApartmentForm = reduxForm({ 
    form: 'ApartmentForm', 
    destroyOnUnmount: false, 
})(Apartamentos); 

Answer 1

で維持されると呼ばれるredux状態変数は、空として初期化されpreviousSearchesを言っていますアレイ。 Submitをクリックするたびに、このpreviousSearchesアレイにフォームデータをプッシュします。したがって、入力ボタンをクリックすると、previousSearches配列のすべての情報が表示されます（redux変数で、propとしてアクセスできます）。このような

何かが私はあなただけ私はonSubmit検証アクションを派遣し、右、プッシュされたフォームデータを格納減速を作成する必要があります意味this.props.previousSearches