使用 react js 構建一個切換開關小部件

Question

我正在嘗試構建一個切換小部件。 這是我要執行的代碼。 在這里，如果切換在真正的 state 中，我將面臨一個問題，它正在正確切換到錯誤的 state。 但是當它是錯誤的 state 時，它不會切換。 我對這個反應js很陌生。 誰能幫我解決這個問題？ 提前致謝。

import { Component, createElement } from "react";
import { CheckboxToggle } from "react-rainbow-components";

export default class SwitchExample extends Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) {
        const { booleanAttribute } = this.props;
        booleanAttribute.setValue(!event.target.value);
    }

    render() {
        const { booleanAttribute } = this.props;
        return <CheckboxToggle value={booleanAttribute.value} onClick={this.handleChange} />;
    }
}

Answer 1

您無需從e.target.value獲取值，而是可以使用回調將 state 更新為：

代碼沙盒演示

  handleChange(event) {
    const { booleanAttribute } = this.props;
    booleanAttribute.setValue((value) => !value);
  }