如何通過React在按鈕單擊時淡入/淡出單獨的組件

Question

超級新手React學習者在這里！ 我希望您在一些翻譯上有所幫助。 我想在單擊按鈕時淡入/淡出單獨的組件（沒有jQuery）

*請注意，這兩個組件位於單獨的js文件中

更加具體：

我希望在頁面加載開始時加載此組件：

import React from "react";


export default class ViewContents extends React.Component {
    render(){
        return (
            <div className="greeting-container">
                <button className="add">Add New Memories</button>
                <button className="view">View Memories</button>
            </div>
        )
    }

}

然后點擊按鈕

<button className="add">Add New Memories</button>

加載此組件：

export default class Inputs extends React.Component {
    constructor(){
        super();
        this.state ={
                location: '',
                date: '',
                group: '',
                places: '',
                placesDescription: '',
                restaurants: '',
                resDescription: '',
                highlights: '',
                photo: '',
                allTrips: {}
        }
        this.handleChange = this.handleChange.bind(this);
    this.addTravels = this.addTravels.bind(this);
    this.removeEntry = this.removeEntry.bind(this);
    this.uploadPhoto = this.uploadPhoto.bind(this);
}
componentDidMount(){
    const dbRef = firebase.database().ref();

        dbRef.on("value",(firebaseData) => {
        console.log(firebaseData.val());

        const travelArray = [];
        const travelData = firebaseData.val();

        for (let travelKey in travelData) {
            travelArray.push({
            });
        }
        this.setState({
            allTrips: travelData,
        })
    })

}
handleChange(e){
    console.log(e.target.value);
    this.setState({
        [e.target.name]: e.target.value
    })
}   
addTravels(e){
    e.preventDefault();

    const newTrip = {
         location: '',
        date: '',
        group: '',
        places: '',
        restaurants: '',
        highlights: '' */
        location: '',
        date: '',
        group: '',
        places: '',
        placesDescription: '',
        restaurants: '',
        resDescription: '',
        highlights: '',
        photo: ''

    })

    const usersRef = firebase.database().ref();

    usersRef.push(newTrip)
    this.state.photo = ''
}

removeEntry(key){
    console.log(key)
    const removeMe = firebase.database().ref(key);
    removeMe.remove();
}

uploadPhoto(e) {
    console.log('photo upload begin')
    this.setState({
        show: true
    })
    let file = e.target.files[0];
    const storageRef = firebase.storage().ref('photos/' + file.name);
    const task = storageRef.put(file).then(() => {
        const urlObject = storageRef.getDownloadURL().then((data) => {
            console.log('photo upload DONE')
            this.setState({
                photo: data,
            })
        })
    });

}
render() {
    return (
        <div className="main-input-container">
            <form action="" className="form-input" onSubmit={this.addTravels}>
                <div className="form-container">
                    <fieldset className="date-location-input">
                        <label htmlFor="location-travelled">Destination</label>
                        <input name="location" type="text" id="location-travelled" value={this.state.location} onChange={this.handleChange}/>
                        <label htmlFor="date-travelled">Date</label>
                        <input type="date" name="date" required="true" value={this.state.date} onChange={this.handleChange}/>
                    </fieldset>

                    <fieldset className="group-mates-input">
                        <label htmlFor="travel-mates">Who did you go with?</label>
                        <input name="group" type="text" id="travel-mates" value={this.state.group} onChange={this.handleChange}/>
                    </fieldset>

                    <fieldset className="places-input">
                        <label htmlFor="places-visited">Places You Visited</label>
                        <input name="places" type="text" id="places-visited1" value={this.state.places} onChange={this.handleChange}/>
                    </fieldset>

                    <fieldset>
                        <label htmlFor="places-visited-textarea1">Places Description</label>
                        <textarea name="placesDescription" id="places-visited-textarea1" value={this.state.placesDescription} onChange={this.handleChange}></textarea>
                    </fieldset>

                    <fieldset className="restaurants-input">
                        <label htmlFor="res-visited">Restuarants / Food Tried</label>
                        <input name="restaurants" type="text" id="res-visited" value={this.state.restaurants} onChange={this.handleChange}/>
                    </fieldset>

                    <fieldset>
                        <label htmlFor="res-textarea">Restaurant Descirption</label>
                        <textarea name="resDescription" id="res-textarea" value={this.state.resDescription} onChange={this.handleChange}></textarea>
                    </fieldset>

                    <fieldset className="highlights-input">
                        <label htmlFor="highlights">Highlights of Trip</label>
                        <textarea name="highlights" id="highlight-textarea" cols="30" rows="10" value={this.state.highlights} onChange={this.handleChange}></textarea>

                        <input type="file" accept="image/*" onChange={this.uploadPhoto} />

                    </fieldset>
                </div>
                    <input type="submit"/>
            </form>
            <div className="contents-container">
                 {Object.keys(this.state.allTrips).map((travels, i) => {

                        console.log(this.state.allTrips[travels].group, "hello")
                        const allTravels = this.state.allTrips[travels];
                        return (

                                <details>
                                    <summary>
                                    <h2>{allTravels.date}</h2>
                                    </summary>
                                        <h3 className="sub-heading">Places Visited:</h3>
                                        <p className="para">{allTravels.places}</p>
                                        <h3 className="sub-heading">Description</h3>
                                        <p className="para">{allTravels.placesDescription}</p>
                                        <h3 className="sub-heading">Went With</h3>
                                        <p className="para">{allTravels.group}</p>
                                        <h3 className="sub-heading">Restaurants Tried</h3>
                                        <p className="para">{allTravels.restaurants}</p>
                                        <h3 className="sub-heading">Description</h3>
                                        <p className="para">{allTravels.resDescription}</p>
                                        <h3 className="sub-heading">HIghlights</h3>
                                        <p className="para">{allTravels.highlights}</p>
                                        <div>Photos:
                                            <img src={allTravels.photo} alt=""/>
                                        </div>
                                        <button onClick={() => this.removeEntry(travels)}>Delete</button> 
                                </details>
                        )
                        })} 
                </div>
        </div>
    );
}

}

我嘗試了一些代碼，在其中添加了一些CSS /更改狀態，但最終卻破壞了我的代碼:(

Answer 1

您可以將onClick處理程序添加到“添加新內存”按鈕。 您可以為其保持點擊狀態。 單擊該按鈕時，可以將其設置為true；而當不單擊按鈕時，可以將其設置為false。 根據布爾值的狀態-您可以向其添加CSS樣式。 您會發現很多有條件的CSS資源。