我希望能夠在選中復選框并執行 onChange 方法后禁用該復選框。我找到了一種方法來做到這一點，但是一旦檢查了多個項目，只有最近檢查的復選框被禁用。禁用方法位于組件類中的渲染方法之前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>;該復選框位于渲染方法內部。用戶選中復選框后，該復選框需要自行選中并禁用
3 回答
翻翻過去那場雪
TA貢獻2065條經驗 獲得超14個贊
一些注意點：
使用駝峰命名法作為函數名
使用 props值使復選框完全受控
使用禁用屬性來禁用輸入元素
在處理函數內設置相關狀態
document.getElementById在你目前的情況下不需要處理程序事件不是
id，如果您只需要id，請將其作為參數傳遞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貢獻1853條經驗 獲得超18個贊
你應該必須附加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>
BIG陽
TA貢獻1859條經驗 獲得超6個贊
event在匿名箭頭函數中傳遞 并將其作為 in 接受argument并eventHandler(component method)使用event.target在需要訪問調用者的情況下，有適當的方法可以做到這一點。
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 關注
- 214 瀏覽
添加回答
舉報
0/150
提交
取消