Question

我有一组4个单选按钮，我需要获取所选按钮的值。我应该确保用户选择了一个单选按钮。以下是我尝试这样做的方法：

export const ReportClass = React.createClass({
    mixins: [React.addons.LinkedStateMixin],

    getInitialState() {
        return {
            reason: "",
        }
    },

    setError(id, msg) {
        const err = this.state.errors;
        err[id] = msg;
        this.setState({errors: this.state.errors});
    },

    sendReport(event) {
        event.preventDefault();
        console.log(this.state.reason);
        console.log(this.state.reason.value);
        if (!this.state.reason) {
           this.setError('reason', "Please choose one");
           return;
        }
    },

    render: function() {
        return (
            <div>
                <form className="form-h" onSubmit={this.sendReport}>                        
                    <label forHtml='first'> first radio button </label> 
                    <input ref='first' name='reason' type='radio' value='first' checkedLink={this.linkState('reason')} />

                    <label forHtml='second'> second radio button </label>
                    <input ref='second' name='reason' type='radio' value='second' checkedLink={this.linkState('reason')} />

                    <label forHtml='third'> third radio button</label>
                    <input ref='third' name='reason' type='radio' value='third' checkedLink={this.linkState('reason')} />

                    <label forHtml='forth'> forth radio button </label>
                    <input ref='forth' name='reason' type='radio' value='forth' checkedLink={this.linkState('reason')} />

                    <div className="col-sm">
                        <button type="submit" className="btn" onClick={this.sendReport}> Send</button>
                    </div>                            
                </form>
            </div>
        );
    }
});

console.log(this.state.reason)在选择其中一个按钮时返回true，而第二个按钮console.log(this.state.reason.value)返回undefined。那么我怎样才能知道哪一个被选中？

Answer 1

我认为checkedLink将个人单选按钮的检查绑定到状态。因为您将多个单选按钮绑定到相同的状态键并且单选按钮是互斥的，所以reason将始终是最后触发的更改事件。

在我看来，最好的解决方案是使用react-radio-group。

如果你不想要一个外部依赖，一个简单的选择是根本不链接状态，并在每个单选按钮上设置一个onChange处理程序：

function onChange(e) {
  if (e.target.selected) {
    this.setState({ reason: e.target.value });
  }
}

现在我们不必担心管理每个单选按钮的选中状态，只要点击一下，我们就会抓住原因。这样做的缺点是它不会双向：如果你设置状态的原因，它就不会改变实际点击的单选按钮。

如何在ReactJS中获取一组Radio Buttons的值

1 个答案: