Как я могу передать функцию в качестве опоры для 2 вложенных / дочерних компонентов?

Question

У меня есть родительский компонент:

filtersModal.js

// imports

class FiltersModal extends React.Component {
  state = { carrier: '' };

  applyFilters = () => {
    const { carrier } = this.state;
    applyFilters({ carrier });
  };

  handleChange = field => ev => {
    this.setState({ [field]: ev.target.value });
  };

  render() {
    return (
      <Modal
        open={isFiltersModalOpened}
        onRequestSubmit={this.applyFilters}
      >
        <Form>
           <GetAllCouriers handleCouriers={this.handleChange('carrier')} />
        </Form>
      </Modal>
    );
  }
}

FiltersModal.propTypes = {
  t: PropTypes.func.isRequired,
  isFiltersModalOpened: PropTypes.bool.isRequired,
  toggleFiltersModal: PropTypes.func.isRequired,
  applyFilters: PropTypes.func.isRequired,
};

export default translate()(FiltersModal);

А также у меня есть другой компонент, который является дочерним по отношению к вышеуказанному:

getAllCouriers.js

// other imports
import CouriersSelect from '../CouriersSelect';

const GetAllCouriers = ({ t, softlayerAccountId, handleCouriers }) => (
  <Query query={GET_ALL_COURIERS}>
    {({ loading, error, data }) => {
      let getAllCouriers;

      if (data && data.GetAllCouriers) {
        getAllCouriers = data.GetAllCouriers;
      }

      return (
        <CouriersSelect
          allCouriersList={getAllCouriers}
          onChange={handleCouriers}
        />
      );
    }}
  </Query>
);

GetAllCouriers.propTypes = {
  t: PropTypes.func.isRequired,
  softlayerAccountId: PropTypes.string.isRequired,
};

export default compose(
  connect(store => ({
    softlayerAccountId: store.global.softlayerAccountId,
  })),
  translate(),
)(GetAllCouriers);

И это компонент, который является дочерним по отношению к правому элементу выше, который содержит функцию onChange, обрабатывающую опору handleCouriers

couriersSelect.js

// imports

const CouriersSelect = ({ t, handleCouriers, allCouriersList }) => (
  <Select onChange={handleCouriers}>
    {allCouriersList.map(carriers => (
      <SelectItem
        key={carriers.name}
        value={carriers.name}
        text={carriers.name}
      />
    ))}
  </Select>
);

CouriersSelect.propTypes = {
  t: PropTypes.func.isRequired,
  allCouriersList: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
  handleCouriers: PropTypes.func.isRequired,
};

export default translate()(CouriersSelect);

У меня есть несколько разных компонентов, где мне нужно передать функцию handleChange на FiltersModal.js

  handleChange = field => ev => {
    this.setState({ [field]: ev.target.value });
  };

Один из этих компонентов getAllCouriers.js, мне нужно, чтобы он работал там. Как видите, getAllCouriers.js вызывается на filtersModal.js, но функция onChange присутствует на couriersSelect.js. Таким образом, эта функция должна идти от couriersSelect.js, который является дочерним элементом getAllCouriers.js, а getAllCouriers.js является дочерним элементом filtersModal.js.

Что я могу сделать?

Answer 1

Сохраняйте свою функцию в самом верхнем компоненте и функцию Pass так:

<GetAllCouriers handleCouriers={() => this.handleChange('carrier')} />

Надеюсь, что ответили на ваши вопросы