反应-单击后更改按钮颜色

仅当组件状态已更改时,才能触发“反应重新渲染”。状态可以从 props 更改,或从直接 setState 改变组件获取更新的状态,并决定是否应重新呈现组件。

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>
   );
  }
}

您需要使用react组件 state . 初始化对应按钮的默认值。并在完成后更改状态。

constructor(props) {
  super(props)
  this.state = {
  }
  steps.forEach( (item,i) => {
    this.state[i] = 'not done'
  })
}

renderStep(step,stepId) {
  return (
    <Button
      variant="raised"
      color={this.state[stepId] === 'done' ? 'primary' : 'default')}
      onClick={this.setState({[stepId]:'done'}
    >
      Done
    </Button>
  )
}

在渲染中,需要这样调用(其中 stepId 是步进阵列中的位置)

<div>
  {renderStep(step,stepId)}
</div>