ANTD开关反应 - 如何区分一个开关与另一个开关

Question

我想使用ANTD开关在网站上实现简单的逻辑，以便我可以基本上检查一个开关，然后检查一个console.log（“已检查一个开关一个”）。但是我不知道如何区分一个切换与另一种切换。

here is my App.js

import React,{ useState } from 'react';
import { Switch } from 'antd';
import './App.css';



const App = () => {
  const [toggle, setToggle] = useState() ;

  const onChange = (checked) => {
    console.log(`switch to ${checked}`);
  }
  return(
  <div className="App">
    <Switch onChange={onChange}></Switch>
    <Switch onChange={onChange}></Switch>
  </div>
);

}
export default App;

Right now there is no way how to distinguish the click of the on switch from click of the other switch.

Answer 1

您可以有两个状态值保存两个开关的状态。并确定检查了哪个开关，您可以使用两个不同的on Change回调来识别单击哪个开关。下面的演示代码：

import React,{ useState } from 'react';
import { Switch } from 'antd';
import './App.css';

const App = () => {
  const [toggleSwitchOne, setToggleSwitchOne] = useState(false) ;
  const [toggleSwitchTwo, setToggleSwitchTwo] = useState(false) ;

  const onChangeSwitchOne = (checked) => {
    console.log(`switch 1 to ${checked}`);
    setToggleSwitchTwo(!toggleSwitchOne)
  }

  const onChangeSwitchTwo = (checked) => {
    console.log(`switch 2 to ${checked}`);
    setToggleSwitchTwo(!toggleSwitchTwo)
  }

  return(
  <div className="App">
    <Switch checked={toggleSwitchOne} onChange={onChangeSwitchOne}></Switch>
    <Switch checked={toggleSwitchTwo} onChange={onChangeSwitchTwo}></Switch>
  </div>
);

}
export default App;

Answer 2

您可以发送一些ID来管理此ID。您的开关代码将转换为这样的东西。

import React,{ useState } from 'react';
import { Switch } from 'antd';
import './App.css';



const App = () => {
  const [toggle, setToggle] = useState() ;

  const onChange = (id,checked) => {
    console.log(`switch to ${id} is ${checked}`);
  }
  return(
  <div className="App">
    <Switch onChange={(checked)=>onChange("ab",checked)}></Switch>
     <Switch onChange={(checked)=>onChange("cd",checked)}></Switch>
  </div>
);

}
export default App;