Question

state={value:false,value1:true}


<Switch 
          id="1"
          isOn={this.state.value}
          onColor="rgb(116, 194, 116)"
          handleToggle={() => this.setState({value:!this.state.value})}
          />

<Switch 
          id="2"
          isOn={this.state.value1}
          onColor="rgb(116, 194, 116)"
          handleToggle={() => this.setState({value1:!this.state.value1})}
          />

开关2中的handletoggler正在更改开关1的状态。

Answer 1

在检查codeandbox时，我注意到您正在从App.js传递id，但没有在switch.js中使用它，因此标签将自身附加到第一个输入，因为ID是硬编码的。 >

switch.js

import React from "react";
import "./styles.css";

const Switch = ({ isOn, handleToggle, onColor, id }) => {
  return (
    <>
      <input
        checked={isOn}
        onChange={handleToggle}
        className="react-switch-checkbox"
        id={id}
        type="checkbox"
      />
      <label
        style={{ background: isOn && onColor }}
        className="react-switch-label"
        htmlFor={id}
      >
        <span className={`react-switch-button`} />
      </label>
    </>
  );
};
export default Switch;

更改反应中多个组件的状态

1 个答案: