当我单击标签面板中的复选框时,它会按预期进行检查。但当我切换到另一个面板然后切换回来时,我发现应该检查的复选框变为未选中状态。我该如何解决这个问题?
这是我的代码,我使用来自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>
);
}