反應 - 單擊后更改按鈕顏色

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

Answer 2

您需要使用反應組件state 。 初始化對應按鈕的defult值。 並在完成后改變狀態。

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>