React js - 为蚂蚁设计开关添加唯一键 [英] React js - Add unique key for ant design switch

问题描述

我在如何为循环下的开关添加唯一键时遇到问题.

实际输出:每当我点击一个开关时，所有开关也都在切换.

预期结果:必须切换一个开关取决于我选择的开关而不是其他开关

这是我的代码:

 让键；让输出 = [];for (让 i = 0; i < info.length; i++) {键 = {...信息[i]，关键:我，动作索引:(<div><开关选中={isSwitchToggle ?真假}onClick={()=>{手柄开关(信息[i]，手柄更改开关，)}}/>

),};输出.推(键)；}返回输出；

这是切换isSwitchToggle状态的函数

handleChangeSwitch = () =>{const { isSwitchToggle } = this.statethis.setState({isSwitchToggle: !isSwitchToggle,})}

顺便说一下，我正在使用 Ant 设计开关.感谢您的帮助

解决方案

这里是如何处理单个 switch.请根据您的需求更改演示代码.

应用

class App 扩展组件 {状态 = {};使成为() {让信息 = [{ id: 1, name: "a", isSwitchToggle: true },{ id: 2, name: "b", isSwitchToggle: false },{ id: 3, name: "c", isSwitchToggle: true }];让输出 = [];for (让 i = 0; i < info.length; i++) {output.push(<SingleSW data={info[i]}/>);}让开关 =output.length !== 0 &&output.map((row, i) => 
{row}
);返回 <div>{switches}</div>;}}

SingleSW(单开关 功能组件)

const SingleSW = ({ data }) =>{const [switchToggle, setSwitchToggle] = useState(data.isSwitchToggle);const onChange = 已检查 =>{setSwitchToggle(选中)；};返回 (<div className="包装器"><切换选中={switchToggle} onChange={onChange}/><跨度>{data.name}</span>

);};

I am having a problem on how to add a unique key to the switch that is under my loop.

Actual Output: Whenever I click one switch, all switches are toggling too.

Expected Result: One switch must toggle depends on what switch I selected and not the other switches

here is my code:

  let keys;
  let output = [];

  for (let i = 0; i < info.length; i++) {
    keys = {
      ...info[i],
      key: i,
      actionIndex: (
        <div>
            <Switch 
            checked={isSwitchToggle ? true: false}
            onClick={()=> {
              handleSwitch(
                info[i],
                handleChangeSwitch,
              )
            }} />
        </div>
      ),
    };

    output.push(keys);
  }
  return output;

Here is the function that toggle the isSwitchToggle state

handleChangeSwitch = () => {
        const { isSwitchToggle } = this.state
        this.setState({ 
            isSwitchToggle: !isSwitchToggle, 
    })
}

Im using Ant design switch by the way. Thanks for the help

解决方案

Here is how to handle an individual switch. Do change the demo code as per your demand.

App

class App extends Component {
  state = {};

  render() {
    let info = [
      { id: 1, name: "a", isSwitchToggle: true },
      { id: 2, name: "b", isSwitchToggle: false },
      { id: 3, name: "c", isSwitchToggle: true }
    ];
    let output = [];

    for (let i = 0; i < info.length; i++) {
      output.push(<SingleSW data={info[i]} />);
    }

    let switches =
      output.length !== 0 && output.map((row, i) => <div key={i}>{row}</div>);

    return <div>{switches}</div>;
  }
}

SingleSW (Single switch functional component)

const SingleSW = ({ data }) => {
  const [switchToggle, setSwitchToggle] = useState(data.isSwitchToggle);

  const onChange = checked => {
    setSwitchToggle(checked);
  };

  return (
    <div className="wrapper">
      <Switch checked={switchToggle} onChange={onChange} />
      <span> {data.name}</span>
    </div>
  );
};

这篇关于React js - 为蚂蚁设计开关添加唯一键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！