Блог

Я использую react / redux с проектом rails. Поэтому я хочу, чтобы мой компонент списка был претендентом (рендеринг сервера), а другой компонент просто показывал детали при наведении курсора мыши на элемент списка.

Событие наведения курсора мыши

Мой вопрос в том, как я могу получить данные о деталях компонента при наведении курсора мыши на каждый элемент списка

Простой пример

 My Code on rails view
= react_component('Listing', { data: @listings }, prerender: true )
= react_component('Detail', { }, prerender: false )

My Code on JS
export default class Listings extends Component {
  render() {
    return (
      <Provider store={store}>
        <ListingsWidget />
      </Provider>
    );
  }
}

My Code for Detail

export default class ListingDetail extends Component {
  render() {
    return (
      <Provider store={store}>
        < ListingDetail Widget />
      </Provider>
    );
  }
}
 

У вас там есть какой-то псевдокод, но у вас будет 3 компонента: Listings , ListingsItem , и ListingsItemDetail . У вас будет onMouseOver атрибут React для элемента в вашем ListingsItem , который будет вызывать ваш обработчик событий для установки состояния. Предполагая, что ваш ListingsItemDetail компонент находится внутри ListingsItem , вы проверите состояние, чтобы увидеть, нужно ли показывать ListingsItemDetail . Если ListingsItemDetail это где-то еще, то вы либо вызовете обработчик событий, переданный в качестве реквизита, либо используете Redux или что-то еще, чтобы установить идентификатор для ListingsItemDetail того, что должно отображаться.

Редактировать — добавлен частичный пример:

 const ListItem = React.createClass({
    getInitialState() {
        return {showDescription: false}
    },

    handleMouseOver() {
        this.setState({showDescription: true})
    },

    handleMouseOut() {
        this.setState({showDescription: false})
    },

    renderDescription() {
        if (this.state.showDescription) {
            return (
                <ListItemDescription description={this.props.item.description} />
            )
        }
    },

    render() {
        return (
            <div onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
                List item title: {this.props.item.title}
                {this.renderDescription}
            </div>
        )
    }
})