reactjs - React - 单击后更改按钮颜色

Question

我有以下按钮:

{this.steps.map((step, index) => (
    <Button variant="raised" color={(step.answer === 'done' ? 'primary' : 'default')}
                            onClick={this.markAs('done', step)}>
                                Done
                            </Button>
)}

我的 markAs() 函数如下所示:

markAs(value, step) {
        step.answer = value;
    }

虽然 step.answer 更改为 done，但按钮的颜色保持不变。

class App extends Component {
   steps = [...some steps];
}

出了什么问题？

Answer 1

只有当组件的状态发生变化时，才能触发 React 重新渲染。状态可以通过 props 更改或直接 setState 更改来更改。组件获取更新后的状态，React 决定是否应该重新渲染组件。

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props){
   super(props);
   this.state = {
     step: { answer: '' },
   };
   this.markAs = this.markAs.bind(this);
  }

  markAs() {
   this.setState({ step: { answer: 'done' } });
  }

  render(){
   return (
     <Button
       variant="raised"
       color={(this.state.step.answer === 'done' ? 'primary' : 'default')}
       onClick={this.markAs}
      > Done
      </Button>
   );
  }
}