[英]populate the checkbox dynamically and maintain state of checkbox in react redux
我們已經通過調用api服務動態填充了復選框項。 根據集合,我們將顯示帶有選中狀態的復選框。
如果我選中/取消選中復選框,如何為動態填充的復選框項實現handlechange事件。
我想獲取當前的復選框狀態。 我怎么才能得到它
在checkboxcontainer.tsx中
data.map(item => (
<label key={item.projectId} className="checkBoxcontainer">
<CheckBox name={item.projectName}
checked={item.checked} handleChange={this.handleChange} />
{item.projectName}<span className="checkmark"/>
</label>
Redux:
const mapStateToProps=({projects} : ApplicationState) => ({
data: projects.data
});
const mapDispatchToProps = (dispatch: Dispatch) => ({
fetchProjects: bindActionCreators(fetchProjects, dispatch),
});
const ProjectListContainer = connect(mapStateToProps,mapDispatchToProps)(ProjectContainer);
export { ProjectListContainer as ProjectContainer };
手柄更換功能:
handleChange(e :any) {
// how to maintain the checkbox state
}
import * as React from 'react';
interface IPropTypes {
type?: string,
name: string,
checked?: boolean,
handleChange(event: any): void;
}
class CheckBox extends React.Component<IPropTypes,{}> {
render() {
return (
<input type='checkbox' name={this.props.name} checked={this.props.checked}
onChange={ e => this.props.handleChange(e) } />
);
}
}
我建議傳遞給Checkbox
的handleChange函數如下所示:
handleChange={(e) => this.handleChange(e, item.projectId)}
然后在handleChange
您可以獲取是否選中了復選框,然后使用projectId
和復選框狀態觸發動作
const isChecked = event.target.checked; someAction(projectId, isChecked);
此操作應更改您的Redux存儲中的數據
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.