无法在反应钩子中单击按钮时绑定单选按钮和复选框数据 [英] Unable to bind the Radio button and checkbox data on button click in react hooks

查看：29
本文介绍了无法在反应钩子中单击按钮时绑定单选按钮和复选框数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个表格，当我提交数据时，它会发送到服务器，然后我将数据显示在表格中..在我有编辑按钮的表格中，当点击编辑按钮时，数据应该绑定到表格.在这里我无法绑定输入字段，但不能绑定单选框和复选框...

const Form = () =>{const [数据，setdata] = useState({用户名":"，下拉":"",性别":"，检查":"})const [更新，setUpdate] = useState([])const handleChange =(e)=>{if(e.target.name !=="gender" && e.target.name !=="checking"){setdata({...data,[e.target.name]:e.target.value});}else if(e.target.name ===性别"){让 allgenders = document.getElementsByName("gender");allgenders.forEach((allradio)=>{如果(allradio.checked){setdata({...data,[e.target.name]:e.target.value});}})}else if(e.target.name ===正在检查"){让 getallCheckboxes =[];let allCheckboxes =document.getElementsByName("checking");allCheckboxes.forEach((allchecks)=>{如果(所有检查.检查){getallCheckboxes.push(allchecks.value)}});setdata({...data,[e.target.name]:getallCheckboxes});}}useEffect(() => {getAllData();}, [])const handleSubmit=(e)=>{e.preventDefault();//setUpdate({...data,update});//console.log(data);axios.post('http://localhost:3000/users',data).then((res)=>{//console.log("用户添加成功");getAllData();处理清除()；})}const getAllData=()=>{axios.get('http://localhost:3000/users').then((res)=>{设置更新(res.data)；})}const deleteUser=(约会)=>{控制台日志(约会)；axios.delete('http://localhost:3000/users/'+dating.id).then(res=>{getAllData();})}

这是编辑和更新功能，在这里我可以绑定输入字段，但不能绑定单选框和复选框...

 const editUser=(userData)=>{设置数据(用户数据)}const handleEdit=()=>{控制台日志(数据)；axios.put('http://localhost:3000/users/'+data.id,data).then(res=>{getAllData();})}返回 (<React.Fragment><h1>湿婆神</h1><div className="container mt-3"><div className="row"><div className="col-md-6"><div className="卡片"><div className="card-header bg-success text-white"><h4>表格</h4><表格><div className="form-group"><输入类型=文本"className =表单控件"placeholder='UserName' name="UserName";value={data.UserName} onChange={handleChange}/>

<div className="form-group"><输入名称=电话"className =表单控件"placeholder='PhoneNumber' name="PhoneNumber";value={data.PhoneNumber} onChange={handleChange}/>

<div className="form-group"><输入名称=电子邮件"className =表单控件"placeholder='Email' value={data.email} onChange={handleChange}/>

<div className="form-group"><选择名称=下拉菜单"value={data.dropDown} onChange={handleChange} className=form-control"；><选项值="></option><option value=Reactjs">ReactJS</option><option value=JS">JavaScript</option><选项值=csCSSs">CSS</option><option value="HTML">HTML</option></选择>

<div class="form-row"><div className="form-group col-md-6"><label className="font-weight-bold">性别:</label><span className="font-weight-bold";>男性<输入类型=收音机"名称=性别"value={data.gender} onChange={handleChange}/></span><span className="font-weight-bold";>女性<输入类型=收音机"名称=性别"value={data.gender} onChange={handleChange}/></span>

<div class="form-check col-md-6"><label class="form-check-label";for=gridCheck">课程</label><br/><输入类型=复选框"值=HTML"名称=检查"value={data.checking} onChange={handleChange}/>HTML <br/><输入类型=复选框"值=JavaScript"名称=检查"value={data.checking} onChange={handleChange}/>JavaScript <br/><输入类型=复选框"值=ReactJS"名称=检查"value={data.checking} onChange={handleChange}/>ReactJS <br/><输入类型=复选框"值=CSS"名称=检查"value={data.checking} onChange={handleChange}/>CSS <br/>

<div className="form-row"><button className="btn btn-cyan";类型=按钮"onClick={handleSubmit}>Submit</button><button className="btn btn-cyan";类型=按钮"onClick={handleEdit}>UpdateData</button>

</表单>

<div className="col-md-12"><div className="card mt-5"><div className="card-header blue-gradient text-white"><h4>表单详细信息</h4><div><div className="row mt-3"><div className="col"><div className="table table-hover table-striped text-center table-primary"><thead className="bg-dark text-white font-weight-bold"><tr><th>用户名</th><th>DropDownValue</th><th>性别</th><th>CheckboxValue</th><th>EDIT</th><th>DELETE</th></tr></thead>{update.map(emp => {返回(<tr><td>{emp.UserName} </td><td>{emp.gender}</td><td>{emp.checking}</td><td><button className="btn btn-cyan font-weight-bold";onClick={()=>{editUser(emp)}}>编辑</button></td><td><button className="btn btn-green font-weight-bold";onClick={()=>{deleteUser(emp)}}>Delete</button></td></tr>)})}</tbody>

</React.Fragment >)}

解决方案

将状态更改为

const [data, setdata] = useState({用户名:"，下拉:"，性别:空，检查:[]});

更新处理程序以访问无线电和复选框 id 属性

const handleChange = (e) =>{if (e.target.name !== "gender" && e.target.name !== "checking") {setdata({ ...data, [e.target.name]: e.target.value });} else if (e.target.name === "gender") {让 allgenders = document.getElementsByName("gender");allgenders.forEach((allradio) => {如果(allradio.checked){setdata({ ...data, [e.target.name]: e.target.id });//<-- 获取输入id}});} else if (e.target.name === "checking") {让 getallCheckboxes = [];let allCheckboxes = document.getElementsByName("checking");allCheckboxes.forEach((allchecks) => {如果(allchecks.checked){getallCheckboxes.push(allchecks.id);//<-- 获取复选框ID}});setdata({ ...data, [e.target.name]: getallCheckboxes });}};

更新/添加 handleClear 以重置状态

handleClear = () =>{设置数据({用户名:"，下拉:"，性别:空，检查:[]});};

添加 id 属性并将 value 属性更改为 checked 并传递一个布尔值

<span className="font-weight-bold"><标签>男性<输入id=男性"类型=收音机"名称=性别"选中={data.gender ===男性"}onChange={handleChange}/></span><span className="font-weight-bold"><标签>女性<输入id=女性"类型=收音机"名称=性别"选中={data.gender ===女性"}onChange={handleChange}/></span>...<label class="form-check-label";for=gridCheck">课程<br/><标签><输入id="HTML"类型=复选框"名称=检查"已检查={data.checking.includes(HTML")}onChange={handleChange}/>HTML<br/><标签><输入id=JavaScript"类型=复选框"名称=检查"已检查={data.checking.includes(JavaScript")}onChange={handleChange}/>JavaScript<br/><标签><输入id=ReactJS"类型=复选框"名称=检查"已检查={data.checking.includes(ReactJS")}onChange={handleChange}/>ReactJS<br/><标签><输入id=CSS"类型=复选框"名称=检查"已检查={data.checking.includes(CSS")}onChange={handleChange}/>CSS

I am having a form, When I submit the data it is going to server and I displayed the data in a table.. In the Table I am having edit button, When clicked on Edit button, the data should bind to the Form. Here I am unable to bind the Inputs fields, but not the Radio and Checkboxes...

const Form = () => {
    const [data, setdata] = useState({
        "UserName" : "",
          "dropDown" :"",
          "gender" : "",
          "checking" :""
    })

    const [update, setUpdate] = useState([])

    const handleChange =(e)=>{
     
        if(e.target.name !=="gender" && e.target.name !=="checking"){
            setdata({...data,[e.target.name]:e.target.value});
        }else if(e.target.name ==="gender"){
                let allgenders = document.getElementsByName("gender");
                allgenders.forEach((allradio)=>{
                          if(allradio.checked){
                            setdata({...data,[e.target.name]:e.target.value});    
                          }
                })
        }else if(e.target.name ==="checking"){
                  let getallCheckboxes =[];
                  let allCheckboxes =document.getElementsByName("checking");
                  allCheckboxes.forEach((allchecks)=>{
                                if(allchecks.checked){
                                    getallCheckboxes.push(allchecks.value)
                                }
                  });
                  setdata({...data,[e.target.name]:getallCheckboxes});     
                  
        }

    }
    useEffect(() => {
        getAllData();
}, [])

   const handleSubmit=(e)=>{
    e.preventDefault();
    // setUpdate({...data,update});
    // console.log(data);
      axios.post('http://localhost:3000/users',data).then((res)=>{
        //   console.log("user added successfully");
        getAllData();
        handleClear();      
      })

   }

  const getAllData=()=>{
    axios.get('http://localhost:3000/users').then((res)=>{
        setUpdate(res.data);
       })
  }

const deleteUser=(dating)=>{
    console.log(dating);
    axios.delete('http://localhost:3000/users/'+dating.id).then(res=>{
        getAllData();
    })
}

This is the Funtions for Edit and update,Here I am able to bind the Inputs fields, but not the Radio and Checkboxes...

 const editUser=(userData)=>{
        setdata(userData)
    }
    
     const handleEdit=()=>{
         console.log(data);
             axios.put('http://localhost:3000/users/'+data.id,data).then(res=>{
            getAllData();
        })
     }
    
        return (
            <React.Fragment>
                <h1>LordShiva</h1>
                <div className="container mt-3">
                    <div className="row">
                        <div className="col-md-6">
                            <div className="card">
                                <div className="card-header bg-success text-white">
                                    <h4>Form</h4>
                                    <form>
                                        <div className="form-group">
                                            <input type="text" className="form-control" placeholder='UserName' name="UserName" value={data.UserName} onChange={handleChange} />
                                        </div>
                                        <div className="form-group">
                                            <input name="phone" className="form-control" placeholder='PhoneNumber' name="PhoneNumber" value={data.PhoneNumber} onChange={handleChange} />
                                        </div>
    
                                        <div className="form-group">
                                            <input name="email" className="form-control" placeholder='Email' value={data.email} onChange={handleChange} />
                                        </div>
                                        <div className="form-group">
                                            <select name="dropDown" value={data.dropDown} onChange={handleChange} className="form-control" >
                                                <option value=""></option>
                                                <option value="Reactjs">ReactJS</option>
                                                <option value="JS">JavaScript</option>
                                                <option value="csCSSs">CSS</option>
                                                <option value="HTML">HTML</option>
                                            </select>
                                        </div>
                                        <div class="form-row">
                                            <div className="form-group col-md-6">
                                                <label className="font-weight-bold">Gender : </label>
                                                <span className="font-weight-bold" > Male <input type="radio" name="gender" value={data.gender} onChange={handleChange}/></span>
                                                <span className="font-weight-bold" >  Female <input type="radio" name="gender" value={data.gender}  onChange={handleChange} /></span>
                                            </div>
                                            <div class="form-check col-md-6">
                                                
                                                        <label class="form-check-label" for="gridCheck">Course</label><br />
                                                <input type="checkbox" value="HTML" name="checking" value={data.checking} onChange={handleChange} /> HTML <br />
                                                <input type="checkbox" value="JavaScript" name="checking" value={data.checking} onChange={handleChange} /> JavaScript <br />
                                                <input type="checkbox" value="ReactJS" name="checking" value={data.checking} onChange={handleChange} /> ReactJS <br />
                                                <input type="checkbox" value="CSS" name="checking" value={data.checking} onChange={handleChange} /> CSS <br />
                                                    
                                            </div>
                                            <div className="form-row">
                                            <button className="btn btn-cyan" type="button" onClick={handleSubmit}>Submit</button>
                                            <button className="btn btn-cyan" type="button" onClick={handleEdit}>UpdateData</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div className="col-md-12">
                            <div className="card mt-5">
                                <div className="card-header blue-gradient text-white">
                                    <h4>FormDetails</h4>
                                    <div>
                                       <div className="row mt-3">
                                           <div className="col">
                                               <div className="table table-hover table-striped text-center table-primary">
                                                    <thead className="bg-dark text-white font-weight-bold">
                                                        <tr>
                                                            <th>UserName</th>
                                                            <th>DropDownValue</th>
                                                            <th>Gender</th>
                                                            <th>CheckboxValue</th>
                                                            <th>EDIT</th>
                                                            <th>DELETE</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                          {
                                                              update.map(emp => {
                                                                  return(
                                                                      <tr>
                                                                        <td>{emp.UserName} </td>
                                                                        <td>{emp.gender}</td>
                                                                        <td>{emp.checking}</td>
                                                                  <td><button className="btn btn-cyan font-weight-bold" onClick={()=>{editUser(emp)}}>Edit</button></td>  
                                                                        <td><button className="btn btn-green font-weight-bold" onClick={()=>{deleteUser(emp)}}>Delete</button></td>  
                                                                      </tr>
                                                                  )
                                                              })
                                                          }
                                                    </tbody>
                                               </div>
                                           </div>
                                       </div>
                                      
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </React.Fragment >
        )
    }

解决方案

Change state to

const [data, setdata] = useState({
  UserName: "",
  dropDown: "",
  gender: null,
  checking: []
});

Update the handler to access the radio and checkbox id attributes

const handleChange = (e) => {
  if (e.target.name !== "gender" && e.target.name !== "checking") {
    setdata({ ...data, [e.target.name]: e.target.value });
  } else if (e.target.name === "gender") {
    let allgenders = document.getElementsByName("gender");
    allgenders.forEach((allradio) => {
      if (allradio.checked) {
        setdata({ ...data, [e.target.name]: e.target.id }); // <-- grab input id
      }
    });
  } else if (e.target.name === "checking") {
    let getallCheckboxes = [];
    let allCheckboxes = document.getElementsByName("checking");
    allCheckboxes.forEach((allchecks) => {
      if (allchecks.checked) {
        getallCheckboxes.push(allchecks.id); // <-- grab checkbox id
      }
    });
    setdata({ ...data, [e.target.name]: getallCheckboxes });
  }
};

Update/add handleClear to reset the state

handleClear = () => {
  setdata({
    UserName: "",
    dropDown: "",
    gender: null,
    checking: []
  });
};

Add id properties and change the value prop to checked and pass a boolean value

<label className="font-weight-bold">Gender : </label>
<span className="font-weight-bold">
  <label>
    Male
    <input
      id="male"
      type="radio"
      name="gender"
      checked={data.gender === "male"}
      onChange={handleChange}
    />
  </label>
</span>
<span className="font-weight-bold">
  <label>
    Female
    <input
      id="female"
      type="radio"
      name="gender"
      checked={data.gender === "female"}
      onChange={handleChange}
    />
  </label>
</span>

...

<label class="form-check-label" for="gridCheck">
  Course
</label>
<br />
<label>
  <input
    id="HTML"
    type="checkbox"
    name="checking"
    checked={data.checking.includes("HTML")}
    onChange={handleChange}
  />
  HTML
</label>
<br />
<label>
  <input
    id="JavaScript"
    type="checkbox"
    name="checking"
    checked={data.checking.includes("JavaScript")}
    onChange={handleChange}
  />
  JavaScript
</label>
<br />
<label>
  <input
    id="ReactJS"
    type="checkbox"
    name="checking"
    checked={data.checking.includes("ReactJS")}
    onChange={handleChange}
  />
  ReactJS
</label>
<br />
<label>
  <input
    id="CSS"
    type="checkbox"
    name="checking"
    checked={data.checking.includes("CSS")}
    onChange={handleChange}
  />
  CSS
</label>

这篇关于无法在反应钩子中单击按钮时绑定单选按钮和复选框数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆