Question

当我点击id = #golden-records-pane-address的列时，我想取消隐藏同一列中的文本框。理想情况下，如果我点击其他地方，这些文本框将再次被隐藏。我通过使用一段jQuery代码实现了前者。我相信在ReactJS中实现这一目标会更加清晰。我理解状态如何使用，但不确定如何在这里做。

var SearchResult = React.createClass({
render: function () {
       // The following shall be removed and turned into React
       $(document).on('click', '#golden-records-pane-address', function(){
            $('#golden-records-pane-address__inputs').removeClass('hidden');
        }); // End of jquery
     return (
            <div>
                <div>
                    <table>
                        <thead>
                            <tr>
                                <th>SUI</th>
                                ...
                            </tr>
                        </thead>
                        <tbody>
                            {resultRows}
                        </tbody>
                        <tfoot>
                            <tr id="golden-records-pane">
                                <td></td>
                                <td>{this.state.site}</td>
                                <td id="golden-records-pane-address">
                                    {this.state.address}

                                    <div id="golden-records-pane-address__inputs" className="hidden">
                                        <input type="text" className="[ form-control ]" placeholder="Address line 1" />
                                        <input type="text" className="[ form-control ]" placeholder="Address line 2" />
                                        <input type="text" className="[ form-control ]" placeholder="City" />
                                        <input type="text" className="[ form-control ]" placeholder="Postcode" />
                                    </div>
                                </td>
                                <td>{this.state.country}</td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        );
    }
});

我尝试过：

var SearchResult = React.createClass({
    onAddressClicked: function () {
        this.setState({
            show_address_details: true
        });
    },
render: function () {
    var cx_hidden = React.addons.classSet({
                    hidden: (this.state.show_address_details == true),
                    'form-inline': (true)
                });

return ( ...

    <td id="golden-records-pane-address" onclick={this.onAddressClicked.bind(this)}>
                                        {this.state.address}

                                        <div id="golden-records-pane-address__inputs" className={cx_hidden}>
                                            <input type="text" className="[ form-control ]" placeholder="Address line 1" />
                                            <input type="text" className="[ form-control ]" placeholder="Address line 2" />
                                            <input type="text" className="[ form-control ]" placeholder="City" />
                                            <input type="text" className="[ form-control ]" placeholder="Postcode" />
                                        </div>
                                    </td>
)

Answer 1

您的状态变量有点令人困惑：当hidden为show_address_details时，您会添加true课程。对我来说，更直观的是将它与false进行比较。

无论如何，错误是没有初始状态，可以由getInitialState：

创建

var SearchResult = React.createClass({
    getInitialState: function() {
        return { show_address_details: false };
    }
    …
});

如何将jQuery removeClass转换为ReactJS方式？

1 个答案: