鍍金池/ 問答/HTML/ react map出來的元素，事件可觸發(fā)，但是樣式不改變？

react map出來的元素，事件可觸發(fā)，但是樣式不改變？

    var majors=[{"name":"****","state":0},{"name":"****","state":0},{"name":"****","state":0}]
    class Content extends React.Component {
                    constructor(props) {
                    super(props);
                }
                componentDidMount(event){
                var swiper1 = new Swiper('.swiper-container', {
                });
                }
        navchange(ind,event){
        console.log(ind);
        majors[ind].state=1;
        console.log(majors[ind]);
            }
        render(){
        return (
        <div>
            <div className="top">
                <div className="search">
                    <input type="text" placeHolder="請輸入搜索內(nèi)容" />
                    <span><img src="img/search.png" alt="" /></span>
                </div>
            <div className="majors">{
                majors.map(function(item,index){
                return<span className="major" key={index} onClick={this.navchange.bind(this,index)}><span className={item.state == "0" ? 'in':''} >{item.name}</span></span>
            }.bind(this))
            }

clipboard.png

clipboard.png

回答
編輯回答
無標題

react不用setState是不會觸發(fā)改變的

  class Content extends React.Component {
        constructor(props) {
            super(props);
            this.state={
                majors:[{"name":"****","state":0},{"name":"****","state":0},{"name":"****","state":0}]
            }
         }
        navchange(ind,event){
                this.state.majors[ind].state = 1;
        this.setState({
            majors:this.state.majors
        });
            }
        render(){
        return (
        <div>
            <div className="top">
                <div className="search">
                    <input type="text" placeHolder="請輸入搜索內(nèi)容" />
                    <span><img src="img/search.png" alt="" /></span>
                </div>
            <div className="majors">{
                this.state.majors.map(function(item,index){
                return<span className="major" key={index} onClick={this.navchange.bind(this,index)}><span className={item.state == "0" ? 'in':''} >{item.name}</span></span>
            }.bind(this))
            }
            </div>
             </div>
              </div>
            )
        }
        }
2017年4月17日 05:34