Kontrollkästchen behält Status in React

Question

nicht bei, wenn ich auf ein Kontrollkästchen in einem Tag-Panel klicke, dann wird es wie erwartet überprüft. Aber wenn ich auf ein anderes Panel umschalte und dann zurückwechsle, habe ich festgestellt, dass das Kontrollkästchen, das aktiviert werden soll, deaktiviert ist. Wie repariere ich das?

Hier ist mein Code, und ich verwende react-tab-panel von 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

Sie berücksichtigen sollten Ihre Anwendung Zustand Baum mit Flux oder Redux zum Speichern.