Question

我试图建立一个简单的react-redux流，其中输入更新状态，并且表单将组件状态中的值提交给redux动作函数。但是，无论何时提交表单，页面都会重新加载，并且当我将e.preventDefault()添加到Submit函数时，我会得到

TypeError：e.preventDefault不是函数

我尝试将e.preventDefault()添加到SubmitToRedux函数中，但是当我添加do时，我得到了TypeError: e.preventDefault is not a function

这是我的Child1.js：

import React, { useState } from "react";
import { changeName } from "../redux/name/name.actions";
import { connect } from "react-redux";

function Child1(state) {
  const [name, setName] = useState("");

  const changeHandler = e => {
    e.preventDefault();
    setName(e.target.value);
  };

  const submitToRedux = e => {
    // e.preventDefault();
    changeName(name);
  };

  return (
    <div>
      <h2>CHILD ONE</h2>
      <form onSubmit={submitToRedux(name)}>
        <input type="text" onChange={changeHandler} />
        <button type="submit">SUBMIT</button>
        <h2>name in Child1 state: {name}</h2>
        <h2>name in redux: {state.name.name}</h2>
      </form>
    </div>
  );
}

const mapStateToProps = state => ({
  name: state.name
});

export default connect(mapStateToProps)(Child1);

App.js：

import React from "react";

import Child1 from "./components/Child1";

function App() {
  return (
    <div className="App">
      <Child1 />
    </div>
  );
}

export default App;

root-reducer.js：

import { combineReducers } from "redux";

import nameReducer from "./name/nameReducer";

export default combineReducers({
  name: nameReducer
});

和nameReducer.js：

import NameActionTypes from "./name.types";

const INITIAL_STATE = {
  name: "Mike"
};

const nameReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case NameActionTypes.CHANGE_NAME:
      return {
        ...state,
        name: action.payload
      };
    default:
      return state;
  }
};

export default nameReducer;

我希望它可以将提交表单时将Child1.js中的state.name.name值更新为从Child1.js组件中的状态提交的值，但它只是重新加载页面，因为我没有将其持久保存到本地存储中，只是保持空白。当我添加e.preventDefault()时，我希望它在表单提交时会停止重新加载页面，但随后会提示

e.preventDefault不是函数

Answer 1

您的代码存在多个问题，

首先，您正在将state作为Child1组件的参数

function Child1(state) {

应该是

function Child1(props) {

您应将此props设置为state，

const [name, setName] = useState(props.name);

您的input应该受到控制，

<input type="text" onChange={changeHandler} value={name} />

您应该像这样打印name

<h2>name in Child1 state: {name}</h2>
<h2>name in redux: {props.name}</h2>

您的表单提交方法应该是这样的

<form onSubmit={submitToRedux}>

最后是您的submitToRedux函数，

const submitToRedux = e => {
    e.preventDefault();  //Now this will work
    changeName(name); //As we have controlled input, we direclty take name from state
};

Answer 2

您只需要传递提交表单后就会调用的函数。

<form onSubmit={submitToRedux}>

但是实际上您是立即调用它：

<form onSubmit={submitToRedux(name)}>

当您仅传递函数时，表单将负责使用Submit事件作为参数来调用它。在您的代码中，错误表明参数e应该包含一个函数preventDefault，当您执行以下操作时，显然没有在作为参数传递的变量中定义该函数：submitToRedux(name)

Answer 3

这是因为您没有将submit事件传递给submitToRedux函数。您应该像这样将其传递给函数：

<form onSubmit={(e) => submitToRedux(e, name)}>

然后在您的函数中像这样处理它：

const submitToRedux = (e, name) => {
    e.preventDefault();
    changeName(name);
  };

这是child1.js的样子：

import React, { useState } from "react";
import { changeName } from "../redux/name/name.actions";
import { connect } from "react-redux";

function Child1(state) {
  const [name, setName] = useState("");

  const changeHandler = e => {
    e.preventDefault();
    setName(e.target.value);
  };

  const submitToRedux = (e, name) => {
    e.preventDefault();
    changeName(name);
  };

  return (
    <div>
      <h2>CHILD ONE</h2>
      <form onSubmit={(e) => submitToRedux(e, name)}>
        <input type="text" onChange={changeHandler} />
        <button type="submit">SUBMIT</button>
        <h2>name in Child1 state: {name}</h2>
        <h2>name in redux: {state.name.name}</h2>
      </form>
    </div>
  );
}

const mapStateToProps = state => ({
  name: state.name
});

export default connect(mapStateToProps)(Child1);

更新redux状态/提交表单时页面重新加载

3 个答案: