3 回答

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>

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>

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>
);
}
}
- 3 回答
- 0 關(guān)注
- 205 瀏覽
添加回答
舉報(bào)