如何在 ReactJS 中为选定的子组件设置 className

Question

ReactJs 新手 - 我看过文档 here 和 here 但我有点困惑。

所以我有一个组件可以根据 JSON 数据创建多个表行。

我正在尝试这样做，因此一旦选择了单选按钮，父 <td> 的类将设置为“成功”。但目前该列的所有行都具有相同的类名。

var SearchResult = React.createClass({
    getInitialState: function () {
        return {
            site: '',
            address: '',
            data: [],
            checked: ''
        };
    },
    onSiteChanged: function (e) {
        this.setState({
            site: e.currentTarget.value,
            checked: 'success'
        });
    },
    render: function () {
        var resultRows = this.props.data.map(function (result) {
            return (
                <tr>
                    <td className={this.state.checked}>
                        <input type="radio" name="site_name"
                            value={result.SITE_NAME}
                            onChange={this.onSiteChanged}
                            key={result.id}/>{result.SITE_NAME}</td>
                    <td>
                        <input type="radio" name="address"
                            value={result.ADDRESS}
                            onChange={this.onAddressChanged} />{result.ADDRESS}</td>
                </tr>
            );
        }, this);
        return (
            <table className="table table-hover table-condensed">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Address</th>
                    </tr>
                </thead>
                <tbody>
                    {resultRows}
                </tbody>
                <tfoot>
                    <tr>
                        <td></td>
                        <td>{this.state.site}</td>
                        <td>{this.state.address}</td>
                    </tr>
                </tfoot>
            </table>
        );
    }
});

确保所选结果获得所选类名的最佳 ReactJS 方法是什么？ 谢谢。

Answer 1

要修改传递给 classSet 属性的值，React 有特殊的插件：React.addons.classSet。当您更改多个不同的类时它非常方便，但在您的情况下它也很有用：

var SearchResult = React.createClass({
    getInitialState: function () {
        return {
            site: '',
            address: '',
            checked: false,
            data: [],
        };
    },
    onSiteChanged: function (selected) {
        this.setState({
            site: selected.SITE_NAME,
            checked: selected.id,
        });
    },
    render: function () {
        var resultRows = this.props.data.map(function (result) {
            var cx = React.addons.classSet({
                success: (this.state.checked === result.id)
            });
            return (
                <tr key={result.id}>
                    <td className={cx}>
                        <input type="radio" name="site_name"
                            value={result.SITE_NAME}
                            onChange={this.onSiteChanged.bind(this, result)}
                            />{result.SITE_NAME}</td>
                    <td>
                        <input type="radio" name="address"
                            value={result.ADDRESS}
                            onChange={this.onAddressChanged} />{result.ADDRESS}</td>
                </tr>
            );
        }, this);
        return (
            <table className="table table-hover table-condensed">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Address</th>
                    </tr>
                </thead>
                <tbody>
                    {resultRows}
                </tbody>
                <tfoot>
                    <tr>
                        <td></td>
                        <td>{this.state.site}</td>
                        <td>{this.state.address}</td>
                    </tr>
                </tfoot>
            </table>
        );
    }
});