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

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

如何在執(zhí)行 onChange 方法后禁用復(fù)選框?

如何在執(zhí)行 onChange 方法后禁用復(fù)選框?

回首憶惘然 2023-10-17 17:22:58
我希望能夠在選中復(fù)選框并執(zhí)行 onChange 方法后禁用該復(fù)選框。我找到了一種方法來做到這一點(diǎn),但是一旦檢查了多個(gè)項(xiàng)目,只有最近檢查的復(fù)選框被禁用。禁用方法位于組件類中的渲染方法之前Disable = id => {  document.getElementById(id).disabled = true;  //another method to execute onchange};<span>  <input    type="checkbox"    className="form-check-input"    onChange={this.Disable}    value=""  /></span>;該復(fù)選框位于渲染方法內(nèi)部。用戶選中復(fù)選框后,該復(fù)選框需要自行選中并禁用
查看完整描述

3 回答

?
翻翻過去那場(chǎng)雪

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

一些注意點(diǎn):

  • 使用駝峰命名法作為函數(shù)名

  • 使用 props使復(fù)選框完全受控

  • 使用禁用屬性來禁用輸入元素

  • 在處理函數(shù)內(nèi)設(shè)置相關(guān)狀態(tài)

  • document.getElementById在你目前的情況下不需要

  • 處理程序事件不是id,如果您只需要id,請(qǐng)將其作為參數(shù)傳遞this.handler(id)

演示:

const App = () => {

  const [checked, setChecked] = React.useState(false);

  const [status, setStatus] = React.useState(true);

  const onChangeHandler = () => {

    setChecked(!checked);

    setStatus(false);

  };

  return (

    <div className="App">

      <input

        type="checkbox"

        value={checked}

        disabled={!status}

        onChange={onChangeHandler}

      />

    </div>

  );

};

ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>


查看完整回答
反對(duì) 回復(fù) 2023-10-17
?
慕容森

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

你應(yīng)該必須附加id到 element 上。


let Disable=(id)=>{

    if(id){

      document.getElementById(id).disabled = true

    }

}

<span>

        <input type="checkbox" className="form-check-input" onChange="Disable(this.id)" id="one"  value=""/>

               <input type="checkbox" className="form-check-input" onChange="Disable(this.id)" id="two"  value=""/>

                      <input type="checkbox" className="form-check-input" onChange="Disable(this.id)"  id="three" value=""/>

                    </span>


查看完整回答
反對(duì) 回復(fù) 2023-10-17
?
BIG陽

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

event在匿名箭頭函數(shù)中傳遞 并將其作為 in 接受argument并eventHandler(component method)使用event.target在需要訪問調(diào)用者的情況下,有適當(dāng)?shù)姆椒梢宰龅竭@一點(diǎn)。


class Stack extends Component {

  Disable = event => {

    event.target.disabled = true;

    //another method to execute onChange

  };


  render() {

    return (

      <span>

        <input

          type="checkbox"

          className="form-check-input"

          onChange={event => this.Disable(event)}

          value=""

        />

        <input

          type="checkbox"

          className="form-check-input"

          onChange={event => this.Disable(event)}

          value=""

        />

        <input

          type="checkbox"

          className="form-check-input"

          onChange={event => this.Disable(event)}

          value=""

        />

      </span>

    );

  }

}


查看完整回答
反對(duì) 回復(fù) 2023-10-17
  • 3 回答
  • 0 關(guān)注
  • 205 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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