Question

我有以下代码。默认情况下爱国者队的btn-primary颜色为蓝色，而打包者的默认颜色为白色。在两个按钮之间选择时颜色会发生变化，但是当我在div外面单击时，两个按钮都会变为白色。真的很感激任何建议。我是一个绝对的初学者。

 class something {
    constructor(props) {
      super(props);
      this.state = {
        clicked: false
      };
    }

    toggleView() {
      this.setState({
        clicked: true
      });
    }
    render() {
      var classRender = "btn-primary";
      classRender = this.state.clicked ? "btn-primary" : "btn-primary selected ";
      return (
        <div>
          <button
            className={classRender}
            type="button"
            onClick={e => this.toggleView()}
          >
            Patriots
          </button>
          <button
            className="btn-primary"
            type="button"
            onClick={e => this.toggleView()}
          >
            Packers{" "}
          </button>
        </div>
      );
    }
  }

Answer 1

我刚刚测试了下面的代码，它会使用onClick类export default class Toggle extends Component { constructor(props) { super(props); this.state = { patriotsSelected : true } this.patriotsSelected = this.patriotsSelected.bind(this); this.packersSelected = this.packersSelected.bind(this); } patriotsSelected(){ this.setState({patriotsSelected : true}) } packersSelected(){ this.setState({patriotsSelected : false}) } render() { var patriotsClass = this.state.patriotsSelected ? "btn-primary selected" : "btn-primary"; var packersClass = this.state.patriotsSelected ? "btn-primary" : "btn-primary selected"; return ( <div> <button className={patriotsClass} onClick={this.patriotsSelected} > Patriots </button> <button className={packersClass} onClick={this.packersSelected} > packers </button> </div> ); } }更新按钮，如果在外面点击则会保持选中状态

meteor add-platform android
Subproject Path: CordovaLib -
android: added platform
Status of the individual requirements:
✓ Java JDK
✓ Android SDK
✗ Android target: avdmanager: Command failed with exit code 1 Error output:
Exception in thread “main” java.lang.NoSuchMethodError:
com.android.prefs.AndroidLocation.getAvdFolder()Ljava/lang/String;
at com.android.sdklib.tool.AvdManagerCli.init(AvdManagerCli.java:278)
at com.android.sdklib.tool.AvdManagerCli.run(AvdManagerCli.java:210)
at com.android.sdklib.tool.AvdManagerCli.main(AvdManagerCli.java:200)
✓ Gradle

Answer 2

即使您点击“打包者”按钮，“爱国者”按钮仍然认为它已被点击，所以正在发生的事情，因为您分配了＆＃39; this.state.clicked＆＃39;在toggleView方法中含糊不清。

class something {
  constructor(props) {
    super(props);
    this.state = {
      clicked: null
    };
  }

  toggleView(team) {
    this.setState({
      clicked: team
    });
  }

  buttonClass(team) {
    var clicked = this.state.clicked;
    return (team === clicked ? "btn-primary" : "btn-primary selected ");
  }

  render() {
    return (
      <div>
        <button
          className={this.buttonClass('Patriots')}
          type="button"
          onClick={e => this.toggleView('Patriots')}
        >
          Patriots
          </button>
        <button
          className={this.buttonClass('Packers')}
          type="button"
          onClick={e => this.toggleView('Packers')}
        >
          Packers{" "}
        </button>
      </div>
    );
  }
}

在div外部单击删除className

2 个答案: