Question

我正在尝试构建一个onChange处理函数以与多个表单字段一起使用。处理程序将分派操作以更新redux存储。这是我到目前为止的内容：

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"

我只看到代码示例使用一个处理程序控制一个输入，所以很好奇是否一个处理程序可以像我尝试的那样控制多个输入字段。

React / Redux：一个用于多个输入字段的onChange处理程序

0 个答案: