javascript - 根据函数返回值更新dom

Question

我正在尝试制作一个列表，其中您只能有一个事件元素。状态更新就像它应该的那样，但 isActive 函数只在一开始激活，然后在状态改变时不激活。

这是我想在 ES5 中做的工作示例:https://codepen.io/anon/pen/mRWqQX

我在 ES6 中的代码不起作用。 isActive 函数不会在状态更改时触发。

import React from 'react'

class RadioButtons extends React.Component {
  constructor() {
    super();
    this.isActive = this.isActive.bind(this);

    this.state = {
      selected: ""
    }
  }
  isActive(value) {
    if (this.state.selected === value) 
      return 'active';
    else 
      return null;
  }
  makeActive(value) {
    this.state = {
      selected: value
    }
  }
  render(){
    return (
      <div>
        <div className={this.isActive("option1")} onClick={this.makeActive.bind(this, 'option1')} > option 1</div>
        <div className={this.isActive("option2")} onClick={this.makeActive.bind(this, 'option2')} > option 2</div>
        <div className={this.isActive("option3")} onClick={this.makeActive.bind(this, 'option3')} > option 3</div>
      </div>
    )
  }
}

export default RadioButtons;

Answer 1

您使用 setState function 在 React 中更改状态.

this.setState({selected: value});

将新值重新分配给 this.state 不会触发重新渲染。