第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

如何在反應(yīng)中獲取表單提交的復(fù)選框數(shù)據(jù)

如何在反應(yīng)中獲取表單提交的復(fù)選框數(shù)據(jù)

寶慕林4294392 2023-05-19 16:04:38
我正在使用復(fù)選框進(jìn)行反應(yīng)。我正在使用從服務(wù)器獲取的動(dòng)態(tài)數(shù)據(jù)制作我的復(fù)選框,并相應(yīng)地在 UI 上顯示選中和未選中狀態(tài)。對(duì)于表單驗(yàn)證,我正在使用react-form-hook并在提交時(shí)獲取數(shù)據(jù),我正在handleSubmit使用react-form-hook我唯一的問(wèn)題是我無(wú)法按照我的要求獲取數(shù)據(jù)。我的數(shù)據(jù):    let dta = [    {      p_id: 2,      p_name: "isco",      isChecked: true    },    {      p_id: 2,      p_name: "david",      isChecked: false    }  ];我的表格:<form onSubmit={handleSubmit(submitForm)}>    {dta.map((li, index) => (      <div key={index}>        <input          type="checkbox"          id={li.component_name}          name={`data.${li.p_name}`}          ref={register}          defaultChecked={li.isChecked}        />        <label htmlFor={li.p_name}>{li.p_name}</label>      </div>    ))}    <button>Submit</button>  </form>在提交時(shí),我得到這樣的數(shù)據(jù){"data":[{"isco":false},{"david":true}]} 但是我想要它的方式如下    {  "data": [    {      "p_name": "isco",      "isChecked": true,      "p_id":1    },    {      "p_name": "david",      "isChecked": false,       "p_id":2    }  ]}編輯代碼沙箱
查看完整描述

1 回答

?
開(kāi)滿天機(jī)

TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超13個(gè)贊

我正在更改代碼


export default function App() {

  

  let data = [

    {

      p_id: 1,

      p_name: "isco",

      isChecked: true

    },

    {

      p_id: 2,

      p_name: "david",

      isChecked: false

    }

  ];


  const [dataForm, setDataForm] = useState(data);


  const changeCheck = (id) => {

    console.log(id);

    let temp = [...dataForm];

    const index = temp.findIndex((x) => x.p_id === id);

    if (index === -1) return;

    temp[index].isChecked = !temp[index].isChecked;

    setDataForm(temp);

  };


  const handleSubmit = () => {

    console.log(`{"data":` + JSON.stringify(dataForm) + `}`);

  };

  return (

    <div className="App">

      <form>

        {dataForm.map((li, index) => (

          <div key={index}>

            <input

              type="checkbox"

              checked={li.isChecked}

              onChange={() => {

                changeCheck(li.p_id);

              }}

            />

            <label htmlFor={li.p_name}>{li.p_name}</label>

          </div>

        ))}

        <button type="button" onClick={handleSubmit}>

          Submit

        </button>

      </form>

    </div>

  );

}


查看完整回答
反對(duì) 回復(fù) 2023-05-19
  • 1 回答
  • 0 關(guān)注
  • 137 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)