React Hooks - сбросить выпадающий список - PullRequest
Новая
       9

React Hooks - сбросить выпадающий список

0 голосов
/ 18 декабря 2018

Я тестирую несколько элементов выбора / опции, используя React Hooks.Мне удалось заполнить выпадающие меню из локального списка, а также использовать метод получения Axios API.Наконец, я создал кнопку сброса, чтобы сбросить эти выпадающие значения на оригиналы (например, «выбрать состояние» и «выбрать автора»), но не смог заставить это работать, я не уверен, что это лучший способ сбросить этизначения.

Вместо публикации здесь кода, я добавил сюда ссылку на этот пример проекта.Любые советы / указатели очень ценятся.

ссылка на код проекта Cansanbox 

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import axios from "axios";
import StateSelector from "./StateSelector";
import Footer from "./Footer";

const SelectTesting = () => {
const reqUrl = "https://hn.algolia.com/api/v1/search?query=redux";

const initialStateValue = [{ id: 0, value: " --- Select A State --- " }];
const initialAuthorValue = [" --- Select an Author --- "];

const allowedState = [
  { id: 1, value: "Alabama" },
  { id: 2, value: "Georgia" },
  { id: 3, value: "Missisippi" }
];

const [authors, setAuthors] = useState(initialAuthorValue);
const [allStates, setAllSelected] = useState(initialStateValue);
const [stateSelected, setStateSelected] = useState(initialStateValue[0].value);

let authorComponent = null;

// useEffect to get states
useEffect(() => {
  console.log("Inside effect");
  const stateValues = initialStateValue;
  allowedState.map(sel => {
    stateValues.push(sel);
    return setAllSelected(stateValues);
  });
}, []);

// useEffect to get Authors
useEffect(() => {
  console.log("Inside effect 2");
  axios(reqUrl).then(result =>
    result.data.hits.map(res => {
      initialAuthorValue.push(res.author);
      return setAuthors(initialAuthorValue);
    })
  );
}, []);

authorComponent = (
  <select>
    {authors.map((author, index) => (
      <option key={index}>{author}</option>
    ))}
  </select>
);

const stateSelectionHandler = event => {
  const value = event.target.value;
  console.log(allStates);
  const stateIndex = allStates.findIndex(state => state.value === value);
  console.log(event.target.value, allStates, "index:", stateIndex);
  setStateSelected(event.target.value);
};

const resetClickHandler = () => {
  console.log("reset was clicked");
  setStateSelected(initialStateValue[0].value);
};

console.log("Inside Index.js Main");

return (
  <div>
    <hr />
      <StateSelector
      selectedState={stateSelected}
      allStates={allStates}
      onStateSelection={stateSelectionHandler}
      />
    <hr />
    <label>Author:</label>
    {authorComponent}
   <hr />
   <Footer onResetClick={resetClickHandler} />
  </div>
);
};

const rootElement = document.getElementById("root");
ReactDOM.render(<SelectTesting />, rootElement);

1 Ответ

0 голосов
/ 18 декабря 2018

Единственное, чего вам не хватает, это на самом деле только атрибут value в вашем элементе select <select onChange={onStateSelection} value={props.selectedState}>

Однако я не думаю, что компонент StateSelector должен быть компонентом с состоянием.Лучше сделать его управляемым / немым компонентом, который принимает реквизиты только от родителя и позволяет родителю контролировать его значение и поведение.

https://codesandbox.io/s/j7zwxnn65w

...