时间戳

首页 > 解决方案 > 使用 REST API 中的 ID 更改特定卡片的 onClick 按钮文本

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

问题描述

在这里，我正在尝试对卡内的 RSVP 按钮进行集成，单击特定卡时，RSVP 按钮内的文本应更改为“Going”，因为下面的特定用户 ID 是我所附的，请帮助我解决这个问题。 .. 在这里，我正在尝试对卡内的 RSVP 按钮进行集成，单击特定卡时，RSVP 按钮内的文本应更改为以下特定用户 ID 的“Going”是我的附件，请帮助我问题...在这里，我正在尝试对卡内的 RSVP 按钮进行集成，单击特定卡时，RSVP 按钮内的文本应更改为以下特定用户 ID 的“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;

标签： javascriptreactjsreact-reduxonclicklistenerbuttonclick

解决方案

你可以这样做。将 meetup id 传递给 handleClick 方法，并在 handleClick 事件处理函数中设置状态中的 mertup id 并比较此状态以相应地替换名称

替换组件中的以下 Button 代码

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

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

推荐阅读