Question

因此，我在当前项目中的最后一个目标是在我单击提名按钮并将电影添加到新的提名数组后禁用它。我被困在我应该如何处理这个问题上。代码如下

这是呈现我的所有组件和创建功能的主页面。

function App() {
  const [movies, setMovies] = useState([]);
  const [movieSearch, setMovieSearch] = useState('');
  const [nominations, setNominations] = useState([])

  const getMovieRequest = async () => {
    const url = `http://www.omdbapi.com/?s=${movieSearch}&apikey=9d2fd6c8`;
    const response = await fetch(url);
    const responseJson = await response.json();
    if (responseJson.Search) {
      setMovies(responseJson.Search);
    }
  };

  useEffect(() => {
    getMovieRequest(movieSearch);
  }, [movieSearch]);

  const nominateMovie = (movie) => {
    const newNominationsArray = [...nominations, movie];
    setNominations(newNominationsArray);
  }

  const removeMovie = (movie) => {
    const newNominationsArray = nominations.filter((nominated) => nominated.imdbID !== movie.imdbID);
    setNominations(newNominationsArray);
  }

  useEffect(() => {
    if (nominations.length === 5) {
      document.getElementById("alert").style.setProperty("display", "flex")
    } else if (nominations.length < 5) {
      document.getElementById("alert").style.setProperty("display", "none")
    }
  }, [nominations])


  return (
    <>
      <div className="container-fluid">
        <SearchBar
          movieSearch={movieSearch}
          setMovieSearch={setMovieSearch} />
        <Alert />
        <div className="row">
          <Nominations length={nominations.length} handleRemoveClick={removeMovie} removeNomination={RemoveNomination} nominations={nominations} />
        </div>
        <div className="row">
          <ResultsList nominations={nominations} movies={movies} handleNominationsClick={nominateMovie} nominateButton={NominateButton} />
        </div>
      </div>
    </>
  );
};

export default App;

当用户进入输入框并以数据响应时，下一段代码将调用 api。每个标题下方都会生成一个提名按钮，当您点击它时，它会添加到 App 中定义的新提名数组

const ResultsList = (props) => {
    const NominateButton = props.nominateButton
    return (
       <>
       {props.movies.map((movie, index) =>
        <div className=" image-container d-flex justify-content-center align-items-center m-3">
           <img src={movie.Poster} alt="movie-poster"></img>
           <button onClick={() => props.handleNominationsClick(movie)} className="overlay d-flex align-items-center justify-content-center">
               <NominateButton  />
           </button>
       </div>
       )}
       </>
      
    )
}

不确定这个是否有用，但这是提名按钮组件。

const NominateButton = () => {
    return (
        <div>
            <span className="mr-2">Nominate</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-plus-circle-fill" viewBox="0 0 16 16">
                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z" />
            </svg>
        </div>
    )
}

export default NominateButton

如果您需要更多信息，可以在此处找到存储库https://github.com/oballematt/the-shoppies

Answer 1

您可以使用“禁用”作为按钮中的属性，单击后它将被禁用

Answer 2

按钮中有一个属性 disabled。您需要根据您的状态将其设置为 true 或 false。即您将维护一个状态变量以禁用按钮。

< button disabled = {this.state.isClicked} />

you can read more here

点击后尝试禁用按钮反应

2 个答案: