如何在反應中提交后隱藏表單，目前您必須單擊切換按鈕

目前，我正在渲染一個歌曲串列，其中有一個切換按鈕，用于渲染表單以添加歌曲。我如何才能在提交該表單時隱藏該表單，而無需單擊按鈕。我試圖制作一個 useEffect 來觸發該功能，但我無法破解它。提前致謝。

歌曲串列

import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';

import { deleteSong, getSongs, updateSong } from '../../store/song';

import ReactAudioPlayer from 'react-audio-player';
import { useHistory } from 'react-router';
import SongForm from '../AddSongForm';
import EditSongForm from '../EditSongForm';
import SpecificSong from '../SpecificSong';

const SongList = () => {

    const [addShowForm, setAddShowForm] = useState(false);
    // const [editShowForm, setEditShowForm] = useState(false);

    const history = useHistory()
    const dispatch = useDispatch();

    const songsObj = useSelector((state) => state.songState.entries);
    const songs = Object.values(songsObj)

    const user = useSelector((state) => state.session.user);
    const CurrentUserId = user?.id

    const remove = (e) => {
        dispatch(deleteSong(e.target.id));
    }


    const addFormCheck = (e) => {
        if (addShowForm) setAddShowForm(false)
        if (!addShowForm) setAddShowForm(true)
    }
    // const editFormCheck = (e) => {
    //     if (editShowForm) setEditShowForm(false)
    //     if (!editShowForm) setEditShowForm(true)
    // }

    useEffect(() => {
        dispatch(getSongs());
    }, [dispatch]);


    return (
        <div>
            <div>
                <button onClick={addFormCheck}>add a song</button>
                {addShowForm ?
                    <SongForm />
                    : null}
            </div>
            <h1>Song List</h1>
            <ol>
                {songs.map(({ id, songName, songLink, userId }) => (
                    <div>
                        <SpecificSong id={id} songName={songName} songLink={songLink} userId={userId} />
                    </div>
                ))}
            </ol>
        </div>
    );
};
export default SongList;

以及正在渲染的組件

import { useState } from "react";
import { useDispatch } from "react-redux";

import { postSong } from "../../store/song";

import { useSelector } from "react-redux";



import Axios from 'axios'

const SongForm = () => {
    const dispatch = useDispatch();

    const [songName, setSongName] = useState("");
    const [songLink, setSongLink] = useState("");
    const [errors, setErrors] = useState([]);

    const [songSelected, setSongSelected] = useState("")

    const reset = () => {
        setSongName("");
        setSongLink("");

    };
    const user = useSelector((state) => state.session.user);
    const userId = user?.id

    let url;

    const handleSubmit = async (e) => {
        e.preventDefault();

        const formData = new FormData()
        formData.append('file', songSelected)
        formData.append('upload_preset', 'd3gthd7l')

        if (songSelected === '') {
            setErrors(['You have to upload an audio file!'])
        }

        Axios.post("https://api.cloudinary.com/v1_1/dyhfkvy6u/video/upload", formData).then(async (response) => {
            if (response.data.url) url = response.data.url
            const newSong = {
                songName,
                songLink: url,
                userId
            };
            const song = await dispatch(postSong(newSong))
                .catch(async (res) => {
                    const data = await res.json()
                    if (data && data.errors) setErrors(data.errors)
                })


        })

        // reset();
    };


    return (
        <div className="inputBox">
            <h1>Add A Song</h1>
            <ul>
                {errors.map((error, idx) => <li className='errors' key={idx}>{error}</li>)}
            </ul>
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    onChange={(e) => setSongName(e.target.value)}
                    value={songName}
                    placeholder="Song Name"
                    name="Song Name"
                />
                <input
                    type='file'
                    onChange={(e) => { setSongSelected(e.target.files[0]) }}
                    placeholder="Song Link"
                    name="Audio File"
                />
                <button type="submit">Submit</button>


            </form>
        </div>
    );
};

export default SongForm;

uj5u.com熱心網友回復：

您可以將setAddShowForm函式作為道具傳遞給表單，并在提交后更新其狀態（請注意，您可以&& 用于條件渲染）：

<div>
  <button onClick={addFormCheck}>add a song</button>
  {addShowForm && <SongForm setAddShowForm={setAddShowForm}/>}
</div>

將您的組件宣告更改為

const SongForm = ({ setAddShowForm }) => {

并更新handleSubmit方法中的狀態：

const handleSubmit = async (e) => {
    e.preventDefault();
  
    const formData = new FormData();
    formData.append('file', songSelected);
    formData.append('upload_preset', 'd3gthd7l');
  
    if (songSelected === '') {
      setErrors(['You have to upload an audio file!']);
    }
  
    Axios.post(
      'https://api.cloudinary.com/v1_1/dyhfkvy6u/video/upload',
      formData
    ).then(async (response) => {
      if (response.data.url) url = response.data.url;
      const newSong = {
        songName,
        songLink: url,
        userId,
      };
      const song = await dispatch(postSong(newSong)).catch(async (res) => {
        const data = await res.json();
        if (data && data.errors) setErrors(data.errors);

        // Hide the form 
        setAddShowForm(false);
      });
    });
  };  

uj5u.com熱心網友回復：

您不能通過調度變數更改觸發 useEffect。Dispatch 是一個鉤子，一旦呼叫就不會改變。您需要創建一個狀態變數 useState 并在 handleChange 上更改其值，當您這樣做時，將該變數包含在 useEffect 而不是 dispatch 上，這將觸發 useEffect 內容。

標籤：javascript 反应 形式 表达 隐藏

上一篇：exphbs不是函式

下一篇：如何為chairequest()匯入服務器應用程式？