React / Redux: один обработчик onChange для нескольких полей ввода - PullRequest
0 голосов
/ 03 декабря 2018

Я пытаюсь создать одну функцию-обработчик onChange для использования с несколькими полями формы.Обработчик отправляет действия для обновления хранилища с избыточностью.Вот что у меня есть:

export default class Referrals extends React.Component {

  render() {
  return (
  <React.Fragment>
    <Modal.Content >
      <Form>
        <Form.Input
          name='referral_1_name'
          onChange={e => this.props.dispatchUpdateStateData(e.target.value, 'var1')}
            />
        <button>Next</button>
      </Form>

    </Modal.Content>
  </React.Fragment>
  )}}

Вот как я настраиваю действие, диспетчер и редуктор:

// App.js
const map_dispatch_to_props = (dispatch, own_props) => {
  return {
    dispatchUpdateStateData : (stateData, stateVariable) => (
      dispatch(updateStateData(stateData, stateVariable)))
  }
};
const map_state_to_props = (state) => {
  return {
    // irrelevant state vars removed
  }
};

export const AppWrapped = connect(map_state_to_props,
   map_dispatch_to_props)(App);


// actions.js
export const updateStateData = (stateData, stateVariable) => {
  return {
    type : 'stateUpdate',
    payload : {
      stateVariable,
      stateData
    }
  }
};


// reducer.js
const starting_state = {
  var1 : ''
};

const reducer = (previous_state = starting_state, action) => {
  switch (action.type) {

    case 'stateUpdate':
      return {
        ...previous_state,
        [action.payload.stateVariable] : action.payload.stateData
      };
    default:
      return previous_state;
  }
};

Я получаю эту ошибку:

TypeError: _this2.props.dispatchUpdateStateData is not a function
onChange
src/components/Referrals.js:42
  39 |   placeholder='Name of Friend/Family Member'
  40 |   name='referral_1_name'
  41 |   style={{ marginBottom: '1vh', width: "265px" }}
> 42 |   onChange={e => this.props.dispatchUpdateStateData(e.target.value, 'var1')}
     | ^  43 | />
  44 | <Form.Input
  45 |   placeholder="This Person's Email"

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...