javascript - 动态填充复选框并在 React Redux 中维护复选框的状态

Question

我们通过 fetch 调用 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>

还原:

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

}

Answer 1

我建议传递给Checkbox的handleChange函数如下所示:

handleChange={(e) => this.handleChange(e, item.projectId)}
然后在 handleChange 中，您可以获取复选框是否被选中，然后使用 projectId 和复选框的状态触发操作

const isChecked = event.target.checked;
someAction(projectId, isChecked);


此操作应该更改您的 redux 存储中的数据