react map出来的元素,事件可触发,但是样式不改变?

xenia
  • 71
    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="请输入搜索内容" />
                    <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

回复
阅读 1.3k
1 个回答

react不用setState是不会触发改变的

  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="请输入搜索内容" />
                    <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>
            )
        }
        }
你知道吗?

宣传栏