избыточная форма реагирования, передающая функцию Onclick в поле

Question

У меня есть следующее

const Range = field => {
  <Button
    className="btn btn-info plus_btn"
    onClick={() => {
      field.handleClick();
    }}
  />;
};

const component = (props: { dismiss: Function }) => {
  <Field
    name="Test"
    component={Range}
    props={props}
    label="Test"
    handleClick={() => console.log("Clicked!")}
  />;
};

const mapDispatchToProps = (dispatch: Function) => ({
  dismiss: () => {
    console.log("dismiss");
  }
});

, когда я нажимаю на кнопку, это дает мне handleclick - это не функция, я хочу передать функцию dismiss функции handleclick, чтобы при нажатии на кнопкувнутри Range он вызывает функцию dismiss в mapDispatchToProps.

Answer 1

Вам нужно использовать его только в компоненте диапазона

const Range = field => {
  <Button
    className="btn btn-info plus_btn"
    onClick={() => {
      field.dismiss();
    }}
  />;
}; 

В противном случае, если вы хотите передать функцию handleClick компоненту диапазона, вам нужно передать ее в подпорках поля избыточных форм, напримерэто:

const Range = field => {
  <Button
    className="btn btn-info plus_btn"
    onClick={() => {
      field.handleClick();
    }}
  />;
};

const component = (props: { dismiss: Function }) => {
  <Field
    name="Test"
    component={Range}
    props={{handleClick:() => props.dismiss()}}
    label="Test"
  />;
};