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。删除后，它完美地工作！

Answer 2

如果您想要反应重新渲染单选按钮，则必须使用state作为checked属性。

示例：

<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);
}

Answer 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')
        );

未检查React受控单选按钮

3 个答案: