2015-07-13 92 views
0

我想選擇一個收音機的默認值。我使用v0.13.3,如果表達式計算結果爲true,則通過設置checked屬性來授予checked={value===selected_value}如何選擇與單選按鈕deafult選擇 - 在反應

在生成的HTML(由我格式化)中,匹配的單選按鈕是checked ed,但我無法選擇任何其他按鈕。

這是怎麼發生的?什麼是設置選項的正確方法?

radio: function(value, selected_value, name, callback) { 
    console.log("radio"); 
    console.log(value===selected_value); 
    return(<label> 
     <input type="radio" name="type" value={value} checked={value===selected_value}/>{name} 
    </label>) 
    }, 

    render: function() { 
    selected_value = "com"; 
    return (
     <div> 
     Options: 
     <br/> 
     {this.radio("cha", selected_value, "CM", null)} 
     <br/> 
     {this.radio("lea", selected_value, "L D", null)} 
     <br/> 
     {this.radio("com", selected_value, "Com", null)} 
     </div> 
    ) 

生成的HTML:

<div data-reactid=".0"><span data-reactid=".0.0">Options:</span><br data-reactid=".0.1"><label data-reactid=".0.2"> 

<input name="type" value="cha" data-reactid=".0.2.0" type="radio"><span data-reactid=".0.2.1">CM</span></label><br data-reactid=".0.3"><label data-reactid=".0.4"> 

<input name="type" value="l" data-reactid=".0.4.0" type="radio"><span data-reactid=".0.4.1">L D</span></label><br data-reactid=".0.5"><label data-reactid=".0.6"> 

<input name="type" value="com" checked="" data-reactid=".0.6.0" type="radio"><span data-reactid=".0.6.1">Com</span></label></div> 

回答

1

通過手動設置checked道具,要創建Controlled Components,這將不會對用戶輸入作出響應,除非你明確地定義一個onChange事件句柄來告訴什麼成分當用戶與它交互時做。

我相信你在找什麼是defaultChecked道具。將其設置爲truefalse將改爲創建非受控組件,這些組件將正常響應用戶輸入,同時仍然向您提供您正在查找的行爲。