reactjs - Reactjs - 使用本地数组时切换开关不起作用

Question

我为正在阅读此内容的任何人提供更新....我想我已经找到了问题 - 当您将切换开关设置为选中时，它也设置为 READONLY。所以我现在无法切换拨动开关。

我在 React 中有一个复选框类型的切换组件。

products是一个用于测试目的的本地设置数组，this.props.products 目前为空。

通过测试，我注意到如果我使用： selected={(products.indexOf(p) > -1)}切换停止工作。它们显示正确，但我无法切换它们。它们不会显示为禁用或在 HTML 元素中设置为禁用。

     products=['ProdA', 'ProdB', 'ProdC];

     customerProducts.forEach(p => {
       content(): string[] {
       const toggles = [];
        if(isEnabled){
          toggles.push( 
            <ToggleComponent
              value={p}
              selected={(products.indexOf(p) > -1)} 
              onChange={this.props.onChange}
              disabled={false}
            />
           );
      }

     render() {
        {this.content()}
     }

    //TOGGLE COMPONENT
    render() {
    const {id, title, disabled, name, value, selected} = this.props;        
    return (
      <div>
        <fieldset>
          <div className="form-structure">                    
            <label className={!this.props.disabled ? 'checkbox-switch-label' : 'checkbox-switch-label checkbox-switch-label-disabled'}>
            <input id={id} type="checkbox" checked={selected} className="checkbox-switch" role="Switch" disabled={disabled} name={name} value={value} onChange={this.validate} />
            <span/>{title}
            </label>
         </div>
       </fieldset>
      </div>
    )}

我可以看到我的开发工具中有一个无效的事件侦听器：dispatchDiscreteEvent 切换正在出现，没有明显禁用（html 元素中没有禁用属性），但单击它们不会打开/关闭它们。我是否应该针对状态值设置“禁用”？我已经在其他地方有一个 onChange 函数来获取值。

标签： reactjs