Question

嗨，我正在研究React Js下拉列表。我想在呈现首次页面时为下拉菜单设置默认值。一旦用户从下拉列表中选择了任何值，那么我将在Redux存储中存储相同的值，并为下拉列表设置相同的值。下面是我的代码。

 render() {
  const {
   allOpenStoresSearchTerms,
    } = this.props;
    return (
     <SelectWithMargin
          instanceId="storeFilter"
          onChange={this.handleChange}
          value={allOpenStoresSearchTerms.selectedOption}
          options={options}
          placeholder="Store Type"
          clearable={false}
     />
  }
}

下面是我的句柄事件。

  handleChange(selectedOption) {
    this.props.searchParameters(
      this.state.searchValues,
      this.state.searchDbTarget,
      '',
      selectedOption
    );
    const openAllStores = {
      ...this.props.allOpenStoresSearchTerms,
      selectedOption,
    };
    this.props.setAllOpenStoresSearchTerms(openAllStores);
  }

每当我在下拉列表中选择一些值时，我都会在redux存储中存储值并为下拉列表设置相同的值。现在，我想在首次加载页面时选择值。以下是下拉菜单的值。

 const options = [
  { value: 'true', label: 'Open Stores' },
  { value: 'false', label: 'All Stores' },
];

有人可以帮我设置页面加载时的默认值吗？我不确定确切需要在哪里设置默认值？任何帮助，将不胜感激。谢谢。

Answer 1

将默认值设置为initialState

const initialState = {
  allOpenStoresSearchTerms: {
    selectedOption: {
      value: 'true',
      label: 'Open Stores',
    },
  },
};

function reduer(state = initialState, action) {
  ...
}

如何为反应中的下拉菜单设置默认值？

1 个答案: