复选框在React

中没有保留状态，当我点击标签面板中的复选框时，就会按照期望进行检查。但是，当我切换到另一个面板，然后切换回来，我发现应该检查的复选框转到未选中状态。我该如何解决？复选框在React

这是我的代码，我使用npm的react-tab-panel。

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> 
    ); 
}

来源

2016-06-13 Downpooooour

您应该使用['setState']（https://facebook.github.io/react/docs/component-api.html#setstate）更改组件的状态。 – robertklep

@robertklep setState在我的情况下不是一个好的解决方案。因为我也使用react-router，所以如果我改变路径然后回到这个路径，所有的状态都会消失。 – Downpooooour

您应该考虑使用Flux或Redux用于存储应用程序状态树。

来源

2016-07-11 12:31:40 Seyhan

我只是使用了REDX。我已经用redux修复了它。不管怎样，谢谢。 – Downpooooour

复选框在React

回答

相关问题