Question

React js 中的动态复选框处理

2022-01-02

63

javascript reactjs

在这里我尝试了很多方法从 react js 中动态生成的复选框中获取值，但都失败了，请帮我解决这个问题.. 我遇到了这样的问题

"Uncaught TypeError: Cannot set properties of undefined" 
or anyone of the states like "{Name: "Module2",View:false,Create:false,Edit:false,Delete:false}",

值应该在 handlechange 本身中更新。

const DynamicCB = ()=>{
const modules = ["Module1", "Module2","Module3"]
const [state,setState] = useState([{
    Name:'',
    View:false,
    Create:false,
    Edit:false,
    Delete:false
}])

const handlechange = (name ,i) =>event=>{

    console.log(name)

    const Data=[...state] 
    if(Data.includes(event.target.name)){    
        Data[i][name] = event.target.checked
        setState(state,Data) 
    }else{
        Data[i].Name = event.target.name
        Data[i][name] = event.target.checked
        setState(state,Data);
    }


  return(<>
    <div className="container">
        <div className="row">
            <h2>Modules</h2>
        </div>
        {
            modules.map((item,i)=>(
                <div className="row" key={i}>
                    <div className="col-sm">
                        <h4>{item}</h4>
                    </div>
                    <div className="col">
                        <input type="checkbox" name={item} className="m-2" 
                            onChange={handlechange('View',i)}/>View
                        <input type="checkbox" name={item} className="m-2" 
                            onChange={handlechange('Create',i)}/>Create
                        <input type="checkbox" name={item} className="m-2" 
                            onChange={handlechange('Edit',i)}/>Edit
                        <input type="checkbox" name={item} className="m-2" 
                            onChange={handlechange('Delete',i)}/>Delete 
                    </div>
                </div>
            ))
        }     
    </div>
  </>)
}

在我的尝试中，它显示了下面任何一个对象数组，或者显示了一个错误，如“无法设置未定义的属性（设置‘名称’）”。我需要如下状态值

[
   { Name: "Module1",View:true,Create:false,Edit:false,Delete:false},
   { Name: "Module2",View:false,Create:false,Edit:false,Delete:false},
   { Name: "Module3",View:false,Create:true,Edit:true,Delete:false}
]

Answer 1

您可以初始化 state （使用 useState 回调）并使用 moduleName 和操作名称（“查看”、“编辑”、“创建”、“删除”）更新每个模块状态，如下所示。

  const modules = ["Module1", "Module2", "Module3"];
  const [state, setState] = useState(() =>
    modules.map((module) => {
      return {
        Name: module,
        View: false,
        Create: false,
        Edit: false,
        Delete: false
      };
    })
  );

  const handlechange = (name, i) => (event) => {
    const moduleName = event.target.name;
    const actionName = name;

    setState((prev) => {
      return prev.map((module) => {
        if (module.Name === moduleName) {
          return { ...module, [actionName]: event.target.checked };
        }
        return module;
      });
    });
  };

代码沙盒