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>
        );
    }
});

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

1 个答案: