未检查反应控制的单选按钮答案

【问题标题】：React controlled radio buttons not being checked未检查反应控制的单选按钮
【发布时间】：2017-02-28 03:10:57
【问题描述】：

我有一个从父组件接收道具的子组件。在子组件中，它呈现几个单选按钮，如下所示：

               <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 更改父组件的状态，然后将该值发送回用于条件。

【问题讨论】：

也许你需要使用defaultChecked而不是checked
@A.L 我认为您应该将其写为答案。它解决了我遇到的问题。

标签： javascript reactjs

【解决方案1】：

感谢这里和 IRC 上的一些帮助，我发现它是我的事件处理程序中的 preventDefault。删除后，它工作得很好！

【讨论】：

非常感谢！我被困在这个问题上好久了！！ +1

【解决方案2】：

如果你想反应重新渲染单选按钮，你必须为选中的属性使用状态。

例子：

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

您还可以像这样为状态设置值（或者，您可以使用 getInitialState 对其进行初始化）：

  this.setState({
      radioButton1 : props.value ==="1",
      radioButton2 :props.value ==="0"
  });

在_handleInputChange 函数中，您可以通过检查单选按钮的状态来知道它是选中还是未选中。

_handleInputChange(e) {
    var isChecked = e.target.value ==="1" ? this.state.radioButton1 : this.state.radioButton2;
    this.props.handleChange(e);
}

【讨论】：

【解决方案3】：

在构造函数中使用bind方法绑定上下文this._handleInputChange.bind(this)，或者在点击时使用(e)=>this._handleInputChange(e)，当正常执行的事件处理程序没有上下文时。

或者如下声明，可以自动绑定这个：

class ButtonGroup extends Component{
   ....
  _handleInputChange= (e)=>{
       ...
   }

示例如下：

  class ButtonGroup extends Component {
            render() {
                return (
                    <div>
                        <div className="radio">
                            <label>
                                <input
                                    type="radio"
                                    name="value"
                                    onChange={(e) => this._handleInputChange(e)}
                                    value="1"
                                    checked={this.props.value === "1"}
                                />
                                True
                            </label>
                        </div>
                        <div className="radio">
                            <label>
                                <input
                                    type="radio"
                                    name="value"
                                    onChange={(e) => this._handleInputChange(e)}
                                    value="0"
                                    checked={this.props.value === "0"}
                                />
                                False
                            </label>
                        </div>
                    </div>
                );
            }

            _handleInputChange(e) {
                this.props.handleChange(e);
            }
        }
        class Form extends Component {
            constructor(props) {
                super(props);
                this.state = {value: '1'};
            }

            render() {
                var value = this.state.value;
                return <ButtonGroup value={value} handleChange={(e) => this.valueChanged(e)}/>
            }

            valueChanged(e) {
                this.setState({value: e.target.value});
            }
        }

        ReactDOM.render(
            <Form />,
            document.getElementById('container')
        );

【讨论】：