Question

在这里，我正在尝试为卡内的RSVP按钮进行集成，请单击特定卡，然后将RSVP按钮内的文本更改为“ Going”，以获取下面的特定用户ID。这个问题... 在这里，我正在尝试集成卡中的RSVP按钮，单击特定的卡后，由于下面的特定用户ID，RSVP按钮中的文本应更改为“ Going”，这是我所附的帮助我解决此问题的方法。 .. 在这里，我正在尝试集成卡中的RSVP按钮，单击特定的卡后，由于下面的特定用户ID，RSVP按钮中的文本应更改为“ Going”，这是我所附的帮助我解决此问题的方法。 ..

import React, { Component } from 'react';
import styles from './meetups.css';
import meetup_banner from '../../assets/images/scin_imgs/topbanner.jpg';
import Header from '../../containers/Header';


class MeetUps extends Component {

    constructor(props){
        super(props);
        this.state={
           meetUpId: 0,
           meetups:[]
        };
        this.handleClick = this.handleClick.bind(this);
    }
    componentDidMount(){
        this.getMeetups()
    }

    handleClick(id) {
    this.setState({
       meetUpId: id
    });
}

    getMeetups(){
          fetch('http://206.189.130.109:8000/api/v1/meetups/')
          .then(res => res.json())
          .then(data => this.setState({meetups:data.results}))
    }

    handleSubmit = event => {
        event.preventDefault();
         //console.log(this.state)

         fetch('http://206.189.130.109:8000/api/v1/meetups/rsvp/', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({

                "id":this.state.meetups.id,
                "meetup_type": "meetup",
                "status": true,
                "meetup": 1,
                "user": 2


            }),
        }).then(rsvp => {
            console.log(rsvp);
           // alert(rsvp.message)
        }).catch(err => err);

    }




    render() {
        // console.log(this.state.meetups)
        return (

            <div id={styles.meetups_body}>
              <Header/>
                <div><img src={meetup_banner} className={styles.meet_bg} alt="meetups"></img> </div> 


                <div className="col-md-12">
                    <div className="row">
                    {this.state.meetups.map((meetup)=>

                        <div className="col-md-4" key={meetup.id}>
                            <div className={styles.card} style={{  marginBottom: '20px' }}>
                                <img className="card-img-top" src={meetup.image_url} alt="Card" style={{ width: '100%' }} />
                                <div align="center"> <button type="button"  className="btn" id={styles.free}>{meetup.cost}</button> </div>
                               <form onSubmit={this.handleSubmit}><div align="center"  > <button key={meetup.id} type="submit" onClick={() => this.handleClick(meetup.id)} className="btn" id={styles.rsvp_button} >{this.state.meetUpId == meetup.id ? 'GOING' :  'RSVP'}. </button> </div></form>  
                                <div className="card-body" style={{padding:'10px'}}>
                                    <div className="col=md-12">
                                        <div className="row">
                                            <div className="col-md-3" align="center">
                                                <h4 style={{ color: '#8cc63f', fontWeight: '600' }}>{meetup.meetup_date}</h4><br />
                                            </div>
                                            <div className="col-md-9">
                                                <h5 className="card-title" style={{fontWeight:'600'}}>{meetup.title}</h5>
                                                <h6>{meetup.time}</h6> <br />
                                                <h6>{meetup.venue}</h6>
                                                <p className="card-text" dangerouslySetInnerHTML={{__html:meetup.content}} id={styles.meetup_content} style={{ textOverflow:'elipsis', width:'100%', whiteSpace:'nowrap',overflow:'hidden' }}></p>
                                                <a  href={`MeetupsDetail/${meetup.id}`} className="btn" id={styles.btn_outline_warning}>Learn More</a> <br />
                                            </div>
                                        </div>
                                    </div>
                                    <div className="meetup_footer" >
                                        <p >{meetup.hash_tag}  </p>
                                        {/* <i className="fas fa-share-alt " id={styles.share_icon} style={{ float: 'right' }}></i> */}
                                    </div>
                                </div>
                            </div>
                        </div>

                        )}


                    </div>
                </div>


            </div>

        )
    }
}

export default MeetUps;

Answer 1

您可以这样做。将metupup id传递给handleClick方法，并在handleClick事件处理程序函数中将其mertup id设置为状态，并比较该状态以相应地替换名称

在组件中替换下面的按钮代码

   <button key={meetup.id} type="submit" onClick={() => this.handleClick(meetup.id)} className="btn" id={styles.rsvp_button} >{this.state.meetUpId == meetup.id ? 'GOING' :  'RSVP'}. </button>

在组件中替换以下功能

    handleClick(id) {
        this.setState({
           meetUpId: id
        });
    }

在构造函数中将metUpId状态初始化为0。当通过匹配特定卡的ID单击特定卡时，它将在Button上显示GOING文本。

使用REST API中的ID更改特定卡的onClick按钮文本

1 个答案: