Question

如何为用户点击的项目更新private void triggerAlarm(int hr, int min, String sid, String cid) { Intent intentToFire = new Intent(getApplicationContext(), AlarmBroadcastReceiver.class); intentToFire.putExtra("cid", cid); intentToFire.putExtra("sid", sid); intentToFire.setAction(ACTION_ALARM); PendingIntent alarmIntent = PendingIntent.getBroadcast(getApplicationContext(), 0, intentToFire, 0); AlarmManager alarmManager = (AlarmManager) getApplicationContext(). getSystemService(Context.ALARM_SERVICE); Calendar c = Calendar.getInstance(); c.set(Calendar.HOUR_OF_DAY, hr); c.set(Calendar.MINUTE, min); c.set(Calendar.SECOND, 0); long afterTwoMinutes = c.getTimeInMillis(); alarmManager.set(AlarmManager.RTC_WAKEUP, afterTwoMinutes, alarmIntent); //sendBroadcast(intentToFire); }为真？

到目前为止，这是我的isSelected功能：

handleSelect

此功能通过道具正确传递并正在运行，我遇到的问题是逻辑。

当前逻辑将数组中的所有项设置为true，这是不正确的。我只想更新/切换用户点击的项目的状态。

我在状态中有一个对象数组，这是其中一个对象的样子：

handleSelect(i) {
  //Get Genres
  let genres = this.state.allGenres;
  genres = genres.map((val, index) => {
    //val.isSelected = index === true;
    return val;
  }); 
  //Set State
  this.setState({
    allGenres: genres
  })
}

Answer 1

以下是我们如何做到这一点：

在每个点击的流派上，我们都会得到id。
我们收到id后，我们切换选定的流派isSelected。
请按照updateGenres方法检查我们是如何以不可变的方式完成的。

updateGenres(selectedId) {
   const { allGenres } = this.state

   this.setState({
     // Here we make sure we don't mutate the state
     allGenres: allGenres.map(genre => ({
        ...genre,
        // Toggle the clicked one, and reset all others to be `false`.
        isSelected: genre.id === selectedId
        // If you want to keep the values of the rest genres, then the check should be: 
        // isSelected: (genre.id === selectedId) ? !genre.isSelected : genre.isSelected
     }))
   })
}

renderGenres() {
  const { allGenres } = this.state

  return allGenres.map(genre => <Gengre onClick={() => this.updateGenres(genre.id) })
}

render() {
  return <div>{this.renderGenres()}</div>
}

此方法的好处是您不依赖于index的{{1}}，您的切换实现将与演示文稿分离。想象一下，如果你改变了类型排序（从ASC到DESC），那么你也必须改变你的切换逻辑。

Answer 2

最简单的方法是在allGenres中单独维护selectedGenre和state 所以handleSelect就像

handleSelect(id) {
  this.setState({
    selectedGenre: id
  });
}

Answer 3

如果传递给i的{{1}}是handleSelect数组中类型的索引，那么

genres

如果handleSelect(i) { //Get Genres let genres = this.state.allGenres; genres = genres.map((val, index) => { val.isSelected = index === i; return val; }); //Set State this.setState({ allGenres: genres }) }引用该类型的i，那么

id

Answer 4

我假设您正在渲染某些组件，并且您想要单击这些组件...您可以使用bind并将回调函数传递给数组的索引。例如：

class Component extends React.Component {
  constructor() {
    super();

    this.state = {
      allGenres: [{
        id: 1,
        genreTitle: 'Horror',
        isSelected: false
      }]
    }
  }

  handleSelect(i) {
    //Get Genres
    let genres = this.state.allGenres;
      genres = genres.map((val, index) => {
      val.isSelected = index === i;
      return val;
    });
    //Set State
    this.setState({
      allGenres: genres
    })
  }

  render() {
    const {allGenres} = this.state;

    return (
      <ul>
        :D
        {allGenres.map((genre, i) => (
          <li onClick={this.handleSelect.bind(this, i)}>
            {genre.genreTitle} {genre.isSelected && 'Is Selected'}
          </li>
        ))}
      </ul>
    );
  }
}

我在bind的onClick回调中使用li，这样我就可以访问回调中的类型索引了。

还有其他一些方法可以做到这一点，因为你拥有该类型的id，你可能想要使用它而不是索引，但是由你来决定。

React JS onClick设置点击索引的状态

4 个答案: