Question

我有一个按钮可以更改onClick的活动状态：

render() {
    return(
      <SomeButton
          onClick={e => this.handleClick(e)}
          id={someId}
          activeStatus={someId === this.state.active ? "active" : "not active"}
      />
    )
}

更改状态的函数：

handleClick(e) {
    e.preventDefault();
    this.setState({ active: e.currentTarget.id });
}

状态：

this.state = {
    active: null
};

用于接收activeStatus道具的按钮：

export default function SomeButton({ activeStatus }) {

    console.log(activeStatus);

    return (
        // button jsx code
    );
}

但是，每次我单击按钮（页面上有3个该按钮的实例）时，activeStatus console.log都会显示：

我点击按钮1：

active
not active
not active

我点击按钮2：

active
active
not active

我点击按钮3：

active
active
active

我期望状态会根据所单击的活动按钮而切换。

我想念什么？

Answer 1

您可以在数组中设置状态：

this.state = {
    active: [false, false, false] // or just: []
};

handleClick(e) {
    e.preventDefault();
    const activeState = [false, false, false]; // or just: []
    activeState[e.currentTarget.index] = true;
    // button index ^^
    this.setState({ active: activeState });
}

然后将activeStatus传递到active状态：

activeStatus={this.state.active}

在组件内部，绑定活动状态：

<button className={ activeStatus[0] ? 'active' : 'not-active' }>...</button>
<button className={ activeStatus[1] ? 'active' : 'not-active' }>...</button>
<button className={ activeStatus[2] ? 'active' : 'not-active' }>...</button>

Answer 2

我将使用e.target.id而不是e.currentTarget.id，如果按钮ID是静态的，则可以将其放入state中，并使用id更新buttonState对象（处理它的几种方法之一）。

工作示例：https://codesandbox.io/s/olmn9k08m5

一些注意事项：

保持状态一致（如果是字符串，请保持字符串，如果这是一个数组，将其保留为任何数组...等等-在下面的示例中 buttonState是object，并保持object）。
此外，除非您要提交“ e.preventDefault() form或尝试block functionality。
始终指定按钮的type（“按钮”或“提交”）

ShowButton.js

import React, { Component } from "react";
import SomeButton from "./SomeButton";

const buttons = ["button1", "button2", "button3"];

export default class App extends Component {
  state = {
    buttonState: {
      button1: "inactive",
      button2: "inactive",
      button3: "inactive"
    }
  };

  handleClick = e => {
    const { id } = e.target; // id="button1","button2" or "button3"
    this.setState(prevState => ({
      buttonState: {
        ...prevState.buttonState, // spread out object
        [id]: prevState.buttonState[id] === "active" ? "inactive" : "active" // use the [id] as an object property (ex: "button1") and set the property's value to "active" or "inactive"
      }
    }));
  };

  render = () => (
    <div className="container">
      <h1>Controlling Active Buttons</h1>
      {buttons.map(id => (
        <SomeButton
          key={id}
          id={id}
          handleClick={this.handleClick}
          activeStatus={this.state.buttonState[id]}
        />
      ))}
    </div>
  );
}

SomeButton.js

import React from "react";

export default ({ activeStatus, handleClick, id }) => (
  <div style={{ marginBottom: 20 }}>
    <button
      type="button"
      style={{ minWidth: 150 }}
      className={`uk-button ${
        activeStatus === "active" ? "uk-button-primary" : null
      }`}
      id={id}
      onClick={handleClick}
    >
      {activeStatus}
    </button>
  </div>
);

仅在单击的按钮上应用活动状态

2 个答案: