时间戳

首页 > 解决方案 > 单击反应后尝试禁用按钮

reactjs - 单击反应后尝试禁用按钮

问题描述

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

这是呈现我的所有组件并制作功能的主页。

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

标签： reactjs

解决方案

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

<button disabled={this.state.}

推荐阅读