Установить состояние компонента из другой функции

Question

У меня есть компонент с состоянием, у которого есть слушатель события прокрутки, подобный этому

import React, { Component } from 'react'
import { withRouter } from 'react-router'
import AppDetailPageUI from './AppDetailPageUI.js'


class AppDetailPageSF extends Component {
  constructor(props) {
    super(props);
    this.state = {
        scrolledDown:false,
    };

    this.handleScroll = this.handleScroll.bind(this);
  }

  render() {
    return (
      <AppDetailPageUI

        scrolledDown={this.state.scrolledDown}
      />
    );
  }


   componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll(event)  {

    if (window.scrollY === 0 && this.state.scrolledDown === true) {
      this.setState({scrolledDown: false});
    } 
    else if (window.scrollY !== 0 && this.state.scrolledDown !== true) {
      this.setState({scrolledDown: true});
    }
  }

}

export default withRouter(AppDetailPageSF)

Это прекрасно работает. Но я хочу использовать метод handleScroll во многих компонентах statefull, включая один и тот же метод в каждом компонентеэто не хорошая практика.

, так что это то, что я попытался вместо этого, я создал другую функцию HandleScrollUtil что-то вроде этого

const HandleScrollUtil = {
    handleScroll: function(component) {

    if (window.scrollY === 0 && component.state.scrolledDown === true) {
        component.setState({scrolledDown: false});
    } 
    else if (window.scrollY !== 0 && component.state.scrolledDown !== true) {
        component.setState({scrolledDown: true});
    }
  }
}

export default HandleScrollUtil

, а затем я попытался вызвать этот метод, передавая эту ссылку что-то вроде этого

componentDidMount() {
    window.addEventListener('scroll', HandleScrollUtil.handleScroll(this));
  }

  componentWillUnmount() {
    window.removeEventListener('scroll',  HandleScrollUtil.handleScroll(this));
  }

Но, похоже, сейчас это не работает.

Answer 1

Только соответствующий component может иметь дело с state, вы можете создать обработчик внутри компонента AppDetailPageSF что-то вроде

setScrollDownHandler = (event,scrollValue) =>{
 this.setState({scrolledDown: scrollValue});
}

, затем вы можете передать этот обработчик любомуКомпонент имеет prop, это правильный путь.

Код для обновления Состояние должен быть в том же компоненте, все, что мы могли бы сделать, это создать средство для решенияи передайте этот обработчик в те места, где мы хотели бы его обновить.

Решение - это Компонент высшего порядка

Я бы порекомендовал использовать HOC , например, его можно перенести на любой компонент, который вы собираетесь использовать.

import React, { Component } from 'react';


const withScrollHandler = (WrappedComponent) => {
    return class extends Component {

        componentDidMount() {
              this.props.setScrollDownHandler();
        }

        componentWillUnmount() {
              this.props.setScrollDownHandler();
        }

        render () {
            return (
                <div>
                    <WrappedComponent {...this.props} />
                </div>
            );
        }
    }
}

export default withScrollHandler;