Question

我正在尝试在用户点击按钮时更新活动类。每次单击此按钮时，下一个项目都应添加类名active并从上一个项中删除。使用jQuery我可以使用addClass和removeClass方法。这些方面的东西会让我开始。

$("button").click(function() {
    $("ul li").removeClass("active");
   var length = $(this).prevAll().length;
   $("ul li:eq(" + length + ")").addClass("active");
});

我不确定如何使用react实现此功能。

我已设置a JSFIDDLE here。

var App = React.createClass({

    getInitialState: function(){

        return {
            active: 0
        }
    },

    incrementIndex: function() {
        this.setState({active : this.state.active + 1});    
    },

    render: function () {
        return(
            <div>
                <ArtistList active={this.state.active}  />
                <Button increment={this.incrementIndex} />
            </div>
        )
    }

});

var ArtistList = React.createClass({

    render: function() {

        return(
            <ul>
                <li className="active">Michael Jackson</li>
                <li>Bob Dylan</li>
                <li>Kendrick Lamar</li>
            </ul>
        )
    }

});

var Button = React.createClass({
    render: function() {
        return(
            <button onClick={this.props.increment}>next</button>
        )
    }
})

Answer 1

您可以通过迭代包含列表内容的数组来动态生成列表元素。然后，您可以简单地将传递的道具与当前迭代进行比较：

var data = ['Michael Jackson', 'Bob Dylan', 'Kendrick Lama'];
var listItems = data.map((value, index) => (
  <li
    key={value} 
    className={this.props.active === index ? 'active' : ''}>
    {value}
  </li>
));

return <ul>{listItems}</ul>;

Answer 2

我会将艺术家作为道具传递给ArtistList，然后在AristList中使用map函数生成li列表并使用三元组来判断它是否应该是活动的。

将笔放在http://codepen.io/finalfreq/pen/bwoddN

var App = React.createClass({

    getInitialState: function(){
        return {
            active: 0
        }
    },

    incrementIndex: function() {
        this.setState({active : this.state.active + 1});    
    },

    render: function () {
      const artistList = ['Michael Jackson', 'Bob Dylan', 'Kendrick Lamar']
        return(
            <div>
                <ArtistList artists={artistList} active={this.state.active}  />
                <Button increment={this.incrementIndex} />
            </div>
        )
    }

});

var ArtistList = React.createClass({

    renderArtists: function() {
      var self = this;
      return this.props.artists.map(function(artist, index) {
        var classes = index === self.props.active ? 'active' : '';
       return <li key={index + artist} className={classes} > { artist } </li>
      });
    },

    render: function() {
        let artists = this.renderArtists();
        return(
            <ul>
              {artists}
            </ul>
        )
    }

});

var Button = React.createClass({
    render: function() {
        return(
            <button onClick={this.props.increment}>next</button>
        )
    }
})

ReactDOM.render(<App />, document.getElementById('app'));

将className添加到li item react

2 个答案: