时间戳

首页 > 解决方案 > React Redux 输入句柄

redux - React Redux 输入句柄

问题描述

我正在尝试使用 react-redux 处理简单的输入值，然后尝试显示它。我知道如何显示它，但我不知道如何将输入值从组件提交到 redux 存储。我在网上搜索并一无所获。有人可以解释如何做到这一点吗？我对 react-redux 完全陌生

import React from "react";
import "./App.css";
import { connect } from "react-redux";
import { useState } from "react";
import { updateValue, addValue } from "./actions/inputActions";

function App(props) {
  const [value, setValue] = useState("");
  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <div className="App">
      <form onSubmit={(value) => props.submitValue(value)}>
        <input onChange={handleChange} value={value} type="text" />
        <button type="submit">Add</button>
      </form>
      <h1>{props.value}</h1>
    </div>
  );
}
const mapStateToProps = (state) => {
  return {
    value: state.value,
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    submitValue: (e, value) => {
      e.preventDefault();
      dispatch(addValue(value));
    },
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(App);

标签： reduxreact-redux

解决方案

使用存储在本地状态中的值更新onSubmit函数，如下所示：

<form onSubmit={(e) => {
  e.preventDefault();
  props.submitValue(value)
}}>
  <input onChange={handleChange} value={value} type="text" />
  <button type="submit">Add</button>
</form>

你的mapDispatchToProps函数是这样的：

const mapDispatchToProps = (dispatch) => {
  return {
    submitValue: (value) => {
      dispatch(addValue(value));
    },
  };
};

推荐阅读