[英]React.js - How do I set a checked/selected radio button and track the onChange?
我在一個組件中有一個每周幾天的廣播組。 如果用戶已經有與他們的帳戶相關聯的一天,我希望它成為選中/選中的單選按鈕。 因此,如果他們之前保存了“星期一”,我將從父級獲取它並將其存儲在狀態中,並希望在頁面呈現時選擇它。
我試圖將其設置為類似於在 React Forms 中進行選擇的方式,但它似乎不適用於 Fieldset。 有什么想法嗎?
constructor(props) {
super(props);
this.state = {
reportWeekday: "monday"
}
}
handleWeekdayChange(event){
this.setState({reportWeekday: event.target.value});
console.log(event.target.value);
}
<fieldset className="schedule-weekday" value={this.state.reportWeekday} onChange={this.handleWeekdayChange}>
<label for="sunday"><input type="radio" name="schedule-weekly-option" value="sunday" id="sunday" />Sunday</label>
<label for="monday"><input type="radio" name="schedule-weekly-option" value="monday" id="monday" />Monday</label>
<label for="tuesday"><input type="radio" name="schedule-weekly-option" value="tuesday" id="tuesday" />Tuesday</label>
<label for="wednesday"><input type="radio" name="schedule-weekly-option" value="wednesday" id="wednesday" />Wednesday</label>
<label for="thursday"><input type="radio" name="schedule-weekly-option" value="thursday" id="thursday" />Thursday</label>
<label for="friday"><input type="radio" name="schedule-weekly-option" value="friday" id="friday" />Friday</label>
<label for="saturday"><input type="radio" name="schedule-weekly-option" value="saturday" id="saturday" />Saturday</label>
</fieldset>
這是 Jonny 的解決方案,沒有啟用類屬性。
class ControlledRadios extends React.Component{
constructor(){
super()
this.state = {
reportWeekday: 'monday'
}
}
handleWeekdayChange(event) {
this.setState({reportWeekday: event.target.value})
}
render() {
let {reportWeekday} = this.state
return (<fieldset onChange={this.handleWeekdayChange.bind(this)}>
<label><input type="radio" name="schedule-weekly-option" value="sunday" checked={reportWeekday === 'sunday'}/>Sunday</label>
<label><input type="radio" name="schedule-weekly-option" value="monday" checked={reportWeekday === 'monday'}/>Monday</label>
<label><input type="radio" name="schedule-weekly-option" value="tuesday" checked={reportWeekday === 'tuesday'}/>Tuesday</label>
<label><input type="radio" name="schedule-weekly-option" value="wednesday" checked={reportWeekday === 'wednesday'}/>Wednesday</label>
<label><input type="radio" name="schedule-weekly-option" value="thursday" checked={reportWeekday === 'thursday'}/>Thursday</label>
<label><input type="radio" name="schedule-weekly-option" value="friday" checked={reportWeekday === 'friday'}/>Friday</label>
<label><input type="radio" name="schedule-weekly-option" value="saturday" checked={reportWeekday === 'saturday'}/>Saturday</label>
</fieldset>)
}
}
對於那些使用 UseState 鈎子的人,您可以簡單地執行以下操作:
import React, { useState } from 'react';
export default function ControlledRadios() {
const [weekday,setWeekday] = useState("monday")
function handleWeekdayChange(event) {
setWeekday(event.target.value)
}
return {
<fieldset className="schedule-weekday" value={weekday} onChange={(event) => handleWeekdayChange(event)}>
<label for="sunday"><input type="radio" name="schedule-weekly-option" value="sunday" id="sunday" />Sunday</label>
<label for="monday"><input type="radio" name="schedule-weekly-option" value="monday" id="monday" />Monday</label>
<label for="tuesday"><input type="radio" name="schedule-weekly-option" value="tuesday" id="tuesday" />Tuesday</label>
<label for="wednesday"><input type="radio" name="schedule-weekly-option" value="wednesday" id="wednesday" />Wednesday</label>
<label for="thursday"><input type="radio" name="schedule-weekly-option" value="thursday" id="thursday" />Thursday</label>
<label for="friday"><input type="radio" name="schedule-weekly-option" value="friday" id="friday" />Friday</label>
<label for="saturday"><input type="radio" name="schedule-weekly-option" value="saturday" id="saturday" />Saturday</label>
</fieldset>
}
似乎在多個同名的不受控制的單選按鈕上設置defaultChecked
並沒有像您期望的那樣工作,並且由於某種原因onChange
每個不受控制的單選按鈕僅觸發一次(使用 react@15.6.1),因此您可能必須切換到通過設置checked
控制輸入。
class ControlledRadios extends React.Component {
state = {
reportWeekday: 'monday'
}
handleWeekdayChange = (event) => {
this.setState({reportWeekday: event.target.value})
}
render() {
let {reportWeekday} = this.state
return <fieldset onChange={this.handleWeekdayChange}>
<label><input type="radio" name="schedule-weekly-option" value="sunday" checked={reportWeekday === 'sunday'}/>Sunday</label>
<label><input type="radio" name="schedule-weekly-option" value="monday" checked={reportWeekday === 'monday'}/>Monday</label>
<label><input type="radio" name="schedule-weekly-option" value="tuesday" checked={reportWeekday === 'tuesday'}/>Tuesday</label>
<label><input type="radio" name="schedule-weekly-option" value="wednesday" checked={reportWeekday === 'wednesday'}/>Wednesday</label>
<label><input type="radio" name="schedule-weekly-option" value="thursday" checked={reportWeekday === 'thursday'}/>Thursday</label>
<label><input type="radio" name="schedule-weekly-option" value="friday" checked={reportWeekday === 'friday'}/>Friday</label>
<label><input type="radio" name="schedule-weekly-option" value="saturday" checked={reportWeekday === 'saturday'}/>Saturday</label>
</fieldset>
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.