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不会触发重新渲染。

Answer 2

您希望使用方法

，而不是设置属性this.state

this.setState({selected: value});

该方法还可以执行一些额外的功能，例如重新渲染和填充。

Answer 3

这应该有用。

  makeActive(value) {
    this.setState({
      selected: value
    })
  }

根据函数返回值

3 个答案: