Изменить текст кнопки, на которую я нажал - PullRequest
Новая
       25

Изменить текст кнопки, на которую я нажал

0 голосов
/ 17 июня 2019

У меня есть несколько кнопок на моем компоненте, которые отображаются при отображении через массив.Есть кнопка для каждого элемента в массиве.Когда я нажимаю на конкретную кнопку, я хочу, чтобы текст только для этой кнопки с указанным индексом изменялся.В настоящее время текст для всех кнопок меняется.Я не совсем уверен, как решить проблему.Вот что у меня получилось: 

export default class Profile extends React.Component{
  state = {
    profile: [],
    events: [],
    disabledButton: -1,
    eventifySent: false
  }

  static contextType = UserContext

  componentDidMount() {
    ProfileService.getProfileById(this.props.match.params.id)
      .then(profile => {
        this.setState({ profile: profile})

      const profileId = this.state.profile.user_id

    EventService.getAllEvents()
      .then( event => {
        const profileEvents = event.filter(e => e.event_owner_id === profileId)
        this.setState({ events: profileEvents})
      })
    })  
  }

  handleIntriguedButton = (id, index) => {
    EventifyService.postEventify({
      recipient_id: this.props.match.params.id,
      event: id,
    })
    .then( response => {
        console.log(response)

      this.setState({ 
        disabledButton: index, 
        eventifySent: true
      }) }
    )
  }

  render() {
    const user = this.state.profile
    const events = this.state.events

    console.log(this.state.disabledButton)

    const userEvents = (events.length === 0 ) ? 'I have no events yet' 
    : events.map((event, i) => 
      <div key={event.id} className="event">
        <p>{event.event_name}</p>
        <button type="submit" disabled={this.state.disabledButton === i} onClick={() => this.handleIntriguedButton(event.id, i)}>{!this.state.eventifySent && this.state.disabledButton !== i ? ('Intrigued') : ('Eventify sent!')}</button>
      </div> 
    )
    return (
      <div className="profile">
        <img src={user.profile_picture} alt=''/>
        <p>Bio: {user.me_intro}</p>
        <ul>
          <li>Music: {user.music_like}</li>
          <li>Favorite movie: {user.movie_like}</li>
        </ul>
        <p>Events:</p>
        <div className="profile-events">
          {userEvents}
        </div>
      </div>
    )
  }
}

Я думал, что выбираю конкретный индекс этой кнопки, но, похоже, нет.Спасибо.

1 Ответ

0 голосов
/ 17 июня 2019

Когда вы устанавливаете eventifySent в значение true, это выражение всегда оценивается как false: 

!this.state.eventifySent && this.state.disabledButton !== i

Поэтому вы всегда будете «заинтригованы».

Если вы немного перевернете его, онодолжно работать: 

this.state.eventifySent && this.state.disabledButton === i ? 'Eventify Sent' : 'Intrigued'
...