タグパネルのチェックボックスをクリックすると、チェックボックスは反応

Question

の状態を保持せず、次に期待どおりにチェックされます。しかし、別のパネルに切り替えてスイッチバックすると、チェックボックスをオンにしてチェックを外す必要があります。どのように私はこれを修正するのですか？

ここは私のコードです。私はreact-tab-panelをnpmから使用しています。

Container:

export default class Container extends Component { 
    static propTypes = { 
    }; 
    constructor(props) { 
     super(props); 
     this.state = { 
      chosenItem: { 
       a: [], 
       b: [], 
       c: [], 
       d: [] 
      } 
     }; 
    } 

    handleCheckBoxChange = (e) => { 
     const value = e.target.value; 
     const item = e.target.attributes.getNamedItem('data-tag').value; 
     const chosenItem = this.state.chosenItem; 
     const index = chosenItem[item].indexOf(value); 
     if (index > -1) { 
      chosenItem[item].splice(index, 1); 

     } 
     chosenItem[item].push(value); 

    } 

    render() { 
     return (
      <div> 
       <Panel 
        handleCheckBoxChange={this.handleCheckBoxChange} 

       /> 
      </div> 
     ); 
    } 
} 

Panel:

import TabPanel from 'react-tab-panel'; 
import 'react-tab-panel/index.css'; 
import CheckBox from './CheckBox.jsx'; 

export default function Panel({ 

    handleCheckBoxChange 
}) { 
    const tabList = { 
     a: ['1', '2'], 
     b: ['1', '2'], 
     c: ['1', '2'], 
     d: ['1', '2'] 
    }; 

    return (
     <TabPanel 
      tabPosition="left" 
     > 
     { 
      Object.keys(tabList).map((key) => { 
       return (
        <form 
         key={key} 
         tabTitle={key} 
        > 
        { 
         tabList[key].map((item) => 
          <CheckBox 
           key={item} 
           value={item} 
           handleCheckBoxChange={handleCheckBoxChange} 
           tag={key} 
          /> 
         ) 
        } 
        </form> 
       ); 
      }) 
      } 
     } 
     </TabPanel> 
    ); 
} 

Checkbox:

export default function CheckBox({ 
    tag, 
    value, 

    handleCheckBoxChange 
}) { 
    return (
     <div> 
      <label> 
       <input 
        type="checkbox" 
        value={value} 

        onChange={handleCheckBoxChange} 
        data-tag={tag} 
       /> 
       {value} 
      </label> 
     </div> 
    ); 
} 

Answer 1

あなたは、アプリケーションの状態のツリーを格納するためFluxまたはReduxを使用して検討すべきです。