Question

我确信我犯的是一个微不足道的错误。我有一个带有两个单选按钮的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，因此应检查第二个按钮，但情况并非如此。我该如何调试呢？

Answer 1

您似乎正在传递numberingPositionAtStart作为"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);

以下行将呈现所需的结果：

{{1}}

您可以在JSfiddle中阅读有关它的详细信息。

尽管在React中设置了值，但未检查单选按钮

1 个答案: