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

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

您似乎正在将 String 作为 numberingPositionAtStart 属性的值传递，例如 "false" 而不是 bool 值 假。

查看这三行将选中第一个复选框:

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 中阅读有关它的详细信息.