儘管在React中設置了值，單選按鈕仍未選中

我確信我犯了一個微不足道的錯誤。我有一個有兩個單選按鈕的React組件。儘管在React中設置了值，單選按鈕仍未選中

var OptionsBox = React.createClass({ 
    render: function(){ 
     console.log("Inside render"); 
     console.log(this.props.numberingPositionAtStart); 
     return (
      <div> 
       <div className="radio"> 
        <label> 
         <input type="radio" name="radioNumberingPositionOptions" id="numberingPositionAtStart" value="1" onChange={this._onClick} checked={this.props.numberingPositionAtStart} /> 
       Append numbering at the beginning of tweets 
        </label> 
       </div> 
       <div className="radio"> 
        <label> 
         <input type="radio" name="radioNumberingPositionOptions" id="numberingPositionAtEnd" value="0" onChange={this._onClick} checked={!this.props.numberingPositionAtStart} /> 
       Append numbering at the end of tweets 
        </label> 
       </div> 
      </div> 
     ); 
    }, 

    _onClick: function(event){ 
     if (event.target.value == 1) 
      { 
       TweetSmartActionCreator.numberingpositionatstart(true); 
      } 
     else{ 
      TweetSmartActionCreator.numberingpositionatstart(false); 
     } 

    } 
});

從控制檯的輸出是

Inside render 
false

然而，始終檢查其總是第一個單選按鈕。即使在改變時，第一個單選按鈕仍然被檢查。

即使在第一次渲染過程中，該值爲false，因此應該檢查第二個按鈕，但情況並非如此。我如何去調試呢？

來源

2015-10-16 shashi

似乎按預期工作：http://jsfiddle.net/pgxkvw3t/。我使用的是Chrome 46和Safari 9 –

當我在網頁中使用它時，它確實按預期工作，可以在http://tweetsmart.in/popup.html中看到，但我正在嘗試進行Chrome擴展並使用相同的代碼，由於某種原因，它似乎並沒有像預期的那樣工作。 – shashi

然後，請澄清您的問題並添加其他相關代碼。此React組件按預期工作。 –

看起來你正在通過並且String作爲numberingPositionAtStart prop的值，如"false"而不是布爾值false。

查閱這些三條線將選擇第一個複選框：

React.render(<OptionsBox name="World" numberingPositionAtStart="true" />, document.body); 

React.render(<OptionsBox name="World" numberingPositionAtStart="false" />, document.body); 

React.render(<OptionsBox name="World" numberingPositionAtStart={true} />, document.body);

而下面一行將呈現期望的結果：

React.render(<OptionsBox name="World" numberingPositionAtStart={false} />, document.body);

您可以在React docs讀到它的詳細信息。

來源

2015-10-16 13:36:56 matagus

你是對的。由於將值存儲在localStorage中，所以bool正在成爲字符串，然後作爲字符串傳遞！ – shashi

儘管在React中設置了值，單選按鈕仍未選中

回答

相關問題