Question

我正在尝试将填满表格的数据发送给道具。我知道REACT-REDUX，但不知道如何连接基于功能的组件

这是我的摘录：

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

// import { connect } from "react-redux";

export default function TextFields(props) {

  const [values, setValues] = React.useState({
    ssn: '',
    phone: '',
    email: '',
    multiline: 'Controlled',
  });

  const handleChange = name => event => {
    setValues({ ...values, [name]: event.target.value });
  };

  const onSubmit = () => {
    const data = {
      ssn: values.ssn,
      email: values.email
    }
    console.log(data)
    props.dispatch({type: 'SUBMIT', data})
  }

  return (
    <React.Fragment>

      <form noValidate autoComplete="off">
       <TextField
        id=""
        label="SSN"
        value={values.ssn}
        onChange={handleChange('ssn')}
        type="number"
        name='ssn'
      />
       <TextField
        id=""
        label="Email"
        value={values.email}
        onChange={handleChange('email')}
        type="email"
        name='email'
      />

      <Button
        onClick={() => onSubmit()}
        variant="contained"
        color="primary"
        size="small"
      >
        Save
      </Button>
    </form>
    </React.Fragment>

  );
}

我想要当用户填写表格并单击“提交”按钮时，它应该将数据发送给道具。

我尝试过像props.dispatch({type: 'SUBMIT', data})

但是由于错误而导致派发不是函数。谁能帮我连接redux来分发数据？

Answer 1

欢迎堆栈溢出。

首先，您需要制作一张地图以执行调度操作。您可以通过创建一个返回道具的函数/箭头函数来做到这一点，就像这样（如果您使用函数执行动作，请确保也导入该函数）：

const mapDispatchToProps = (dispatch) => {
 return {
 someAction: () => dispatch(actionFunction())
}
}

您还可以直接调度操作类型：

const mapDispatchToProps = (dispatch) => {
 return {
 someAction: () => dispatch({type: "ACTION_TYPE"})
}
}

，然后将其连接到功能：

export default connect ({}, mapDispatchToProps) (yourComponent);

您可以在下面的文档中查看更多信息： https://react-redux.js.org/using-react-redux/connect-mapdispatch

React-Redux连接功能基础组件以分派给道具

1 个答案: