时间戳

首页 > 解决方案 > 是否可以在没有重定向的情况下在 React 中提交表单？

reactjs - 是否可以在没有重定向的情况下在 React 中提交表单？

问题描述

当我提交表单时，我会直接进入黑页，或者它会被重定向到类似这样的内容

?name="..."&type="..."

但我想留在同一个组件中并更新组件，而不会根据状态变化进行重定向。

路线代码：

import Home from './pages/Home';
import Products from './pages/products';
import { Route } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <h1>App Page</h1>
      <Route path="/">
        <Home />
        <Products />
      </Route>
    </div>
  );
}

export default App;

家庭组件：

import { connect } from 'react-redux';
import { addProduct } from '../actions/shop.Action';

const Home = ({ addProduct }) => {
  let name;
  let type;

  const nameHandler = (e) => {
    name = e.target.value;
  };

  const typeHandler = (e) => {
    type = e.target.value;
  };

  const submitHandler = (e) => {
    e.preventDefault();

    addProduct({
      productName: name,
      productType: type,
    });
  };

  return (
    <form onSubmit={submitHandler}>
      <h1>Add Product</h1>
      <label>Product Name</label>
      <input type="text" name="pname" onChange={nameHandler}  />
      <label>Product Type</label>
      <input type="text" name="ptype" onChange={typeHandler} />
      <button type="submit">Submit</button>
    </form>
  );
};

const mapDispatchToProps = (dispatch) => ({
  addProduct: (product) => dispatch(addProduct(product)),
});

export default connect(null, mapDispatchToProps)(Home);

产品成分：

import {connect} from 'react-redux'



const Products = ({products}) =>{

 console.log(products)
    return(
        <div>
           {products.length?products:<p>No Products</p>} 
        </div>
    )
}


const mapStateToProps = (state) =>({
    products: state.shop
})

export default connect(mapStateToProps)(Products);

减速机或初始状态：

import { addProductType } from '../actionTypes/shop.actionTypes';


const INIT = [];


const Shop = (state = INIT, action) => {

  switch (action.type) {
    case addProductType:
        const products = [...state]
        products.push(action.payload)
        return  [...state,...products]
    default:
        return state    
  }
};

export default Shop;

这是图像

视频链接：https ://streamable.com/nauewl

标签： reactjsreduxreact-reduxreact-router

解决方案

您的代码有几个问题。这是固定版本：

https://codesandbox.io/s/recursing-meitner-80qo0?file=/src/pages/Home.jsx

你的减速机不正确。您在UI中使用了一个object但期待一个数组。Products此外，初始状态应该是一个数组。

注意：如果你愿意，你可以使用一个对象，但除非你打算拥有一个巨大的列表并向你的应用程序添加 crud 功能，否则这并不是必需的。此外，对象没有lenght属性。你会Object.keys在那种情况下使用。

import { addProductType } from "../actionTypes/shop.actionTypes";

const INIT = [];

const Shop = (state = INIT, action) => {
  switch (action.type) {
    case addProductType:
      return [...state, action.payload];
    default:
      return state;
  }
};

export default Shop;

初始状态应该是一个数组，每次添加一个项目时，前一个状态都必须与当前添加的项目合并并返回一个array.

在您的产品 UI 中，您没有对产品进行迭代。你需map要这样做。（您可以使用其他方法，但这是最推荐的方法，而且您不能使用类似的方法，forEach因为它不会返回任何内容）。

更正：

import { connect } from "react-redux";

const Products = ({ products }) => {
  return (
    <div>
      {products.length > 0
        ? products.map((product, index) => (
            <div key={index}>
              <span>{product.productName}</span>
              <span>{product.productType}</span>
            </div>
          ))
        : "No products"}
    </div>
  );
};

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

export default connect(mapStateToProps)(Products);

注意：对于 key prop，始终建议为每个列表项设置一个唯一标识符。在这种情况下，索引将起作用，因为应用程序的当前范围不处理列表操作。

最后，在您的Home组件中，您使用局部变量而不是状态变量来捕获输入值。这很好，但是不允许您跟踪值并为任何其他用例（如验证）操作它们。

推荐阅读