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的{{1}}状态变量，它被初始化为一个空数组。每次单击previousSearches时，都会将表单数据推送到此Submit数组中。因此，当您单击下一个输入按钮时，只显示previousSearches数组中的所有信息（这是previousSearches变量，可以作为redux进行访问。）

我想这样的东西

prop

然后，您只需case 'ADD_PREVIOUS_SEARCH': return Object.assign({}, state, { previousSearches: state.previousSearches.push(action.search) })

访问previousSearches即可

显示搜索表单下方的最后搜索项目

1 个答案: