未检查React受控单选按钮

Question

我有一个子组件,从父母接收道具.在子组件中,它呈现一对像这样的单选按钮:

               <div>
                    <div className="radio">
                        <label>
                            <input
                                type="radio"
                                name="value"
                                onChange={this._handleInputChange}
                                value="1"
                                checked={this.props.value === "1"}
                            />
                            True
                        </label>
                    </div>
                    <div className="radio">
                        <label>
                            <input
                                type="radio"
                                name="value"
                                onChange={this._handleInputChange}
                                value="0"
                                checked={this.props.value === "0"}
                            />
                            False
                        </label>
                    </div>
                </div>

handleInputChange只调用父方法,如下所示:

_handleInputChange(e) {
    this.props.handleChange(e);
}

将父组件的状态设置为单选按钮中选择的值(即"1"或"0").我遇到的问题是检查过的条件会返回正确的道具,但它们的功能很奇怪.几乎看起来当无线电输入接收到新的道具值时,它不会重新渲染checked.当组件首次渲染时,props.value是一个空字符串.当用户选择单选按钮时,它会更改父组件的状态,_handleInputChange然后将该值重新发送给条件.

Answer 1

感谢这里和IRC的一些帮助,我发现它是preventDefault我的事件处理程序中的一个.删除后,它完美地工作!