react动态改变样式

Question

实现一个点击按钮变色的简单需求(react + mobx)

render() {
        return (
          <div className="begin">
          <h3>请选择本局配置</h3> 
            <div className="options-box">  
                  {
                      this.store.config.map((val, index) => {
                          return (
                    <span onClick={this.select.bind(this, index)} key={index}>
                    <i style={{backgroundColor: val.select ? '#365dea' : '#FFF'}}></i>
                    {val.title}</span>
                            )
                      })
                     }
            </div>
          </div>
        );
      }

select是一个action

 @action select = (index) => {
    this.config[index].select = !this.config[index].select
    console.log(this.config[index].select);
  }

点击按钮发现this.config[index].select是变化的，但是按钮颜色没变，求大神告知怎么解决？

Answer 1

你的style是根据val.select来变化的，关this.config[index].select什么事

Answer 2

你的值变了，但是render肯本没有重新渲染呀，你只是单纯的改变了this.config[index].select的值，
你加一个<p>{val.select}</p>看一下值有没有变化，
肯定要用setState来改变state才能让render重新渲染DOM吧。

Answer 3

你在action输出这个config值变化了，但你的store值有改变么？你在render下输出config看你的值变了没有呢