Question

我在React js中实现了一个表单，它执行以下操作：

从服务器获取一些内容。
以电台列表的形式显示内容。
如果用户不想从任何提供的广播列表中选择（添加他们自己的文本输入），则允许用户添加他们自己的字段。

应随时选择其中任何一项

我对React js很新，但我已经阅读了controlled components React的处理内容，但我无法想到任何可以帮助我解决问题的事情。

让我先说明我的代码：

var OrderForm = React.createClass({

    render: function(){

        return (
            <div className="panel panel-default">
                    <div className="panel-heading">
                         Hi, {userObject.attributes.Name}
                    </div>
                    <div className="panel-body">
                            <div className="well well-sm">
                                 Choose your delivery address
                            </div>

                        <form>                           
                                 {
                                     addressArray.map(function(c){

                                         return <div className="radio">
                                                <label>
                                                <input type="radio" />
                                                    {c}
                                                </label>
                                                </div>

                                     })

                                 }
                                <br/>
                            <div className="well well-sm">
                                Or add a new one
                                </div>

                            <div className="input-group">
                                    <span className="input-group-addon">
                                    <input type="radio" aria-label="..." />
                                    </span>
                                         <input type="text" className="form-control" aria-label="..." />
                             </div>

                        </form>

        </div>
        </div>

        );

    }
});

addressArray是一个数组，其字符串内容呈现为单选列表。

我的问题是：

如何确保在React js中一次只选择一个单选按钮？另外，我如何获得已提交内容的价值？

我正在考虑为每个呈现的广播列表使用bind方法，但我真的不知道要在其中放置什么。是否每个列表项都可以维护自己的state？

有任何帮助吗？感谢。

Answer 1

您只需将当前所选项目的索引存储在OrderForm组件的状态中。

var OrderForm = React.createClass({
    getInitialState: function() {
        return {
            selectedItemIdx: null,
        };
    },

    _handleChange: function(idx) {
        this.setState({
            selectedItemIdx: idx,
        });
    },

    _handleSubmit: function(e) {
        e.preventDefault();
        e.stopPropagation();
        console.log(this.state.selectedItemIdx);
    },

    render: function() {
        return (
            <form onSubmit={this._handleSubmit}>
                {addressArray.map(function(address, idx) {
                    return (
                        <input
                            key={idx}
                            type="radio"
                            checked={this.state.selectedItemIdx === idx}
                            onChange={this._handleChange.bind(null, idx)}
                        />
                    );
                }, this)}
            </form>
        );
    },
});

您可以通过this.state.selectedItemIdx检索组件中当前所选项目的索引。

在React js中实现带有文本输入的无线电列表

1 个答案: