如何通过React在按钮单击时淡入/淡出单独的组件

Question

Super newbie React learner here! i would like your help on some intranstions. I want to fade in/fade out separate components on button click (without jquery)

*note that these two components are on separate js files

To be more specific:

I want this component to be loaded in at the beginning of page load:

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>
        )
    }

}

and on button click

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

load up this component:

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>
    );
}

}

I have tried some code where I add some css/changing the states but it just ended up breaking my code :(

Answer 1

You can add an onClick handler to the add new memory button. You can maintain a clicked state for it. When the button is clicked, you can set it to true and when it is not being clicked - you can set it to false. Based on the state of the boolean - you can add css styling to it. You will find a lot of resources for conditional css.