React.js - 如何設置選中/選中的單選按鈕並跟蹤onChange？

Question

我在一個組件中有一個星期幾的收音機組。如果用戶已經有一天與他們的賬戶關聯，那麼我希望這是選中/選中的單選按鈕。因此，如果他們之前保存過「星期一」，我會從父項中獲取並將其存儲在狀態中，並希望在頁面呈現時選擇它。

我試圖將它設置成類似於它在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> 

Answer 1

這裏是沒有的類屬性強尼的解決方案使。

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>) 
    } 

} 

Answer 2

好像在多個同名uncontrolled單選按鈕設置defaultChecked如你所期望不工作，由於某種原因onChange只（使用react@15.6.1）每不受控制的單選按鈕觸發一次，因此您可能需要通過設置checked來切換到controlled輸入。

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> 
    } 
} 

• Live version