时间戳

首页 > 解决方案 > 如何在反应中将选择框的值重置为默认值

reactjs - 如何在反应中将选择框的值重置为默认值

问题描述

我有以下代码https://codesandbox.io/s/async-http-u9zsg

我想要实现的是每次切换电影时重置第二个选择框的值。

我尝试了很多不同的东西，但没有任何运气。我不是要给我写代码，我只是想朝着正确的方向前进我错过了什么，我的方法完全错误吗？

提前致谢

编码 ：

import React, { useState, useEffect } from "react";
import fetch from "node-fetch";

const query = `{
  allFilms{
    films{
      title 
      characterConnection{
        characters{
          name
          species{
            name
          }
          homeworld{
            name
          }
        }
      }
    }
  }
}`;

function App() {
  const [state, setState] = useState({
    loading: true,
    appliedFilters: {},
    species: []
  });

  useEffect(() => {
    const fetchMovieData = () => {
      const options = {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ query })
      };
      return fetch(
        "https://swapi-graphql.netlify.com/.netlify/functions/index",
        options
      )
        .then(res => res.json())
        .then(res =>
          setState({ ...state, data: res.data.allFilms.films, loading: false })
        );
    };
    fetchMovieData();
  }, []);

  if (state.loading) {
    return <div>Loading...</div>;
  }

  /*work from here */

  const getSpeciesOptions = () => {
    if (state.appliedFilters.movie === undefined) {
      return <option>Select a movie first</option>;
    }
    const currentMovie = state.data.filter(
      movie => movie.title === state.appliedFilters.movie
    );
    const characters = currentMovie[0].characterConnection.characters;
    const speciesList = characters.map(char =>
      char.species === null ? "unknown" : char.species.name
    );
    return [...new Set(speciesList)].map(specie => <option>{specie}</option>);
  };

  const handleFilterChange = e => {
    setState({
      ...state,
      appliedFilters: {
        ...state.appliedFilters,
        [e.target.name]: e.target.value
      }
    });
  };

  console.log(state);
  const removeFilters = () => setState({ ...state, appliedFilters: {} });
  const movieOptions = () =>
    state.data.map(movie => <option>{movie.title}</option>);

  return (
    <div className="App">
      <form>
        <select
          name="movie"
          onChange={e =>
            e.target.value !== "default"
              ? handleFilterChange(e)
              : removeFilters()
          }
        >
          <option value="default">Please select movie</option>
          {movieOptions()};
        </select>

        <select name="species">
          <option value="default">Please select a species</option>
          {getSpeciesOptions()}
        </select>
      </form>
    </div>
  );
}

export default App;

标签： reactjs

解决方案

您需要做的就是为第二个选择控件创建一个引用。

  let ref = React.createRef();
  ...
  <select ref={ref}name="species">
   <option value="default">Please select a species</option>
      {getSpeciesOptions()}
    </select>
  </form>

然后在第一个选择的回调中执行以下操作：

const handleFilterChange = e => {
  setState(...);
  ref.current.value = 'default';
};

使用对元素的引用，您现在可以操纵该值。

推荐阅读