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>

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

2 个答案: