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

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

您的状态变量有点令人困惑：当 show_address_details 为 true 时，您添加 hidden class。对我来说更直观的是将它与 false.

进行比较

反正错误是没有初始状态，可以通过getInitialState:

创建

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

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

How to convert jQuery removeClass into ReactJS way?

javascript

reactjs