如何在进行选择之前使我的代码中的复选框默认为未选中，同时保持我的功能相同？

Posted 2023-02-21

【中文标题】如何在进行选择之前使我的代码中的复选框默认为未选中，同时保持我的功能相同？

【英文标题】：How do I make my checkbox in my code default to unchecked before a selection is made while keeping my functionality the same?

【发布时间】：2022-01-21 19:28:36

【问题描述】：

现在我有数字逻辑来存储所选选择的数字值。我想保持这种状态。无论出于何种原因，默认情况下始终默认选中第一个选项的复选框

 let labels = ['Staff', 'Customers'];

    // index 2 is web alert banner for staff
    // index 3 is web alert banner for customers
    if (this.props.channelIndex === 2 || this.props.channelIndex === 3) 
      labels = ['Staff (Hub)', 'Customers (Public Site)'];
    
const channelTypeIndex = this.props.channelIndex % 2 === 0 ? this.props.channelIndex : this.props.channelIndex - 1;
 return (
      <div className="widget comm-type-selector">
        <div className="comm-label">1. Choose your audience and message format </div>
        <div>
          labels.map((opt, i) => 
            return (
              <div className="rec-form-check-wrap" key=`$opt-key`>
                <label
                  htmlFor=opt
                  className="rec-label-radio">
                  <input
                    id=opt
                    className="rec-input-hide comm-channel-type-picker"
                    type="radio"
                    name=`$opt-input`
                    checked=this.props.channelIndex === channelTypeIndex + i
                    onChange=() => this.props.setChannelIndex(channelTypeIndex + i) />
                  <span className="rec-input-radio" />
                  opt
                </label>
              </div>
            );
          )
        </div>
      </div>
    );

【参考方案1】：

我能够创建一个实例，其中状态和道具的工作方式与此处http://react.tips/checkboxes-in-react/中看到的相同