javascript - 如何在 ReactJS 中为 li 元素添加事件类/状态？

Question

我整天都在为一个问题苦苦挣扎...我有图书 list ，点击后用户可以看到每本书的详细信息。我想在单击元素 li 时添加 background-color(类似于 active 类)。我使用 Redux 和 React，但不知道创建此功能的最佳方法是什么。请给我一些提示，因为我对 React 环境感到气馁......

book-list.js

class BookList extends Component {
    renderList(){
        return this.props.books.map((book) => {
            return (
                <li key={book.title} 
                    className="list-group-item" 
                    onClick={() => this.props.selectBook(book)}>
                    {book.title}
                </li>
            )
        })
    }

render () {
    return (
        <div>
            <h3 className="m-t-2 m-b-1">Books to read:</h3>
            <ul className="list-group col-sm-4">
                {this.renderList()}
            </ul>
        </div>
    );
 } 
}

function mapStateToProps (state) {
    return {
        books: state.books
    };
 }

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ selectBook: selectBook }, dispatch)
}

export default connect (mapStateToProps, mapDispatchToProps)(BookList); 

reducer_active_book.js

export default function(state = null, action) {
    switch(action.type) {
    case 'BOOK_SELECTED':
        return action.payload;
    }
        return state;
}

Action .js

export function selectBook (book) {
    return {
        type: 'BOOK_SELECTED',
        payload: book
    }
}

Answer 1

您可以使用classnames 包https://github.com/JedWatson/classnames

从“类名”导入类名；

return this.props.books.map((book) => {
        return (
            <li key={book.title} 
                className={classnames({'list-group-item':true, 'active': book.active})} 
                onClick={() => this.props.selectBook(book)}>
                {book.title}
            </li>
        )
    })

只有当 book.active 为 true 时，active 类才会生效

//编辑你必须通过 mapStateToProps 从你的状态传递 reducer_active_book 属性

function mapStateToProps (state) {
return {
    books: state.books,
    reducer_active_book: state.reducer_active_book,
};

现在在渲染中你可以使用它。

return this.props.books.map((book) => {
        return (
            <li key={book.title} 
                className={classnames({'list-group-item':true, 'active': this.props.reducer_active_book.id === book.id})} 
                onClick={() => this.props.selectBook(book)}>
                {book.title}
            </li>
        )
    })