如何获取 Reactstrap 的 CustomInput Switch 组件的状态，以及如何映射数组中的开关？

Posted 2023-03-23

【中文标题】如何获取 Reactstrap 的 CustomInput Switch 组件的状态，以及如何映射数组中的开关？

【英文标题】：How to get state of Reactstrap's CustomInput Switch component, and how to map switches from an array?

【发布时间】：2020-02-01 18:32:20

【问题描述】：

        <FormGroup>
          <div>
            this.props.diseases.map((disease, index) => (
              <FormGroup>
                <CustomInput
                  type="switch" 
                  id="exampleCustomSwitch"
                  key=disease
                  disease=disease
                  onClick=(disease) => this.props.toggle(disease)
                  label=disease
                />
              </FormGroup>
            ))
            
          </div>
        </FormGroup>

我希望能够找出开关的状态，无论它是打开还是关闭。不知道我怎么能做到这一点？我是否要传递某种默认值，其中 0 为关闭，1 为开启？

目前，开关已从阵列适当映射，但打开或关闭仅适用于第一个开关。因此，如果我单击任何其他开关，由于某种原因，第一个开关会切换。

【参考方案1】：

对于第 1 点，您可以使用e.target.checked 来检查特定CustomInput 的真/假状态；检查this stackblitz 看看它是否有效

对于第 2 点，如果您共享现有代码，将更容易帮助您解决特定场景

相关js：

class App extends Component 
  constructor() 
    super();
    this.state = 
      name: "World to React",
      log: []
    ;
    this.customInputSwitched.bind(this);
  

  customInputSwitched(buttonName, e) 
    let newStr = `we received $e.target.checked for $buttonName...`;
    console.log(newStr);
    let newLog = [...this.state.log, newStr];
    this.setState( log: newLog );
  

  render() 
    var testName = "modal for testing - click here";
    return (
      <div>
        <Hello name=this.state.name />
        <p>Start editing to see some magic happen :)</p>
        <Form>
          <FormGroup>
            <Label for="exampleCheckbox">Switches</Label>
            <div>
              <CustomInput
                type="switch"
                id="exampleCustomSwitch"
                name="customSwitch"
                label="Turn on this custom switch"
                onChange=this.customInputSwitched.bind(this, "button1")
              />
              <CustomInput
                type="switch"
                id="exampleCustomSwitch2"
                name="customSwitch"
                label="Or this one"
                onChange=this.customInputSwitched.bind(this, "button2")
              />
              <CustomInput
                type="switch"
                id="exampleCustomSwitch3"
                label="But not this disabled one"
                disabled
              />
              <CustomInput
                type="switch"
                id="exampleCustomSwitch4"
                label="Can't click this label to turn on!"
                htmlFor="exampleCustomSwitch4_X"
                disabled
              />
            </div>
          </FormGroup>
        </Form>
        this.state.log
      </div>
    );
  

更新 #1：根据下面提问者的评论

https://stackblitz.com/edit/react-rcqlwq 的代码中几乎没有问题

你必须在构造函数中实例化登录状态 customInputSwitched 函数应该传递特定按钮的参数，而不是硬编码的 'button1' - 所以我们添加疾病的索引号 所有按钮的 ID 不能是相同的 'exampleCustomSwitch'，所以我们只需在 ID 中添加索引号 映射为数组的最佳做法是还包含一个索引，这有好处（如下两点所示）

相关工作 JS 用于您的代码/stackblitz：

class App extends Component 
  constructor() 
    super();
    this.state = 
      diseases: [
  "Normal",
  "Over inflated lungs",
  "Pneumonia",
  "Pneumothorax",
  "Congestive cardiac failure",
  "Consolidation",
  "Hilar enlargement",
  "Medical device",
  "Effusion"
],
log: []
    ;
    this.customInputSwitched.bind(this);
  

  customInputSwitched(buttonName, e) 
    let newStr = `we received $e.target.checked for $buttonName...`;
    console.log(newStr);
    let newLog = [...this.state.log, newStr];
    this.setState( log: newLog );
  

  render() 
    return (
      <div>
        <p>Start editing to see some magic happen :)</p>
        <Form>
          <FormGroup>
            <Label for="exampleCheckbox">Switches</Label>
            this.state.diseases.map((disease, index) => 
              //console.log(disease, index);
              let idName = "exampleCustomSwitch"+index;

              return (
              <div key=index>
                <CustomInput
                type="switch"
                id=idName
                name="customSwitch"
                label=disease
                onChange=this.customInputSwitched.bind(this, "button"+index)
              />
              </div>
              );
            

            )
          </FormGroup>
        </Form>
        this.state.log
      </div>
    );
  

【讨论】：

由于某种原因，它还告诉我有关 StackBlitz 上 concat 的一些错误，但无论如何都会复制该错误，如果您尝试切换任何不是第一个，它出于某种原因切换了第一个：stackblitz.com/edit/react-rcqlwq

嗨@BlahZayBlahZay，根据您共享的堆栈闪电更新了答案...工作代码也可在：stackblitz.com/edit/react-djmwut

后续问题：什么是优雅的方式，如果我点击一个按钮，所有切换开关都重置为未切换？这是否涉及重新渲染组件或传递某种参数？