Javascript 如何在Redux`matchDispatchToProps`函数中访问组件表单数据？

编辑。人们建议将价值观传递给我的动作创造者，但我尝试了所有我能想到的方法，但都失败了

我目前正在第一次尝试Redux，并试图通过调用

mapDispatchToProps

在点击按钮时读取表单中的信息，但我不清楚如何让它这样做。表单组件是由React呈现的，因此，当它可用时，是否能够绑定是一个问题，但是Redux是一个活动扳手，我还不知道如何进行补偿。基本上，我的组件有以下功能：

import React from 'react';
import { connect } from 'react-redux';
import { action } from '../actions/actionFile';

const Add = (props) => (
    <div className="add">
      <input className="field-one" type="text" placeholder="One" />
      <input className="field-two" type="number" placeholder="Two" />
      <input className="field-three" type="number" placeholder="Three" />
      <button onClick={() => props.addItem('Literally anything')}>+</button>
    </div>
)

const mapDispatchToProps = (dispatch) => {
  return {
    action: () => dispatch(action({ 
      // I have three fields I need to update in the store.
    }))
  }
}

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

但是如果我运行此操作并在action creator内设置断点，

val

值未定义。出于某种原因，Redux不允许我向动作创建者提供动态数据，我不明白为什么

---

显然，我不能仅使用

querySelector

提取信息，因为加载回调时表单不存在。如果我用硬编码的伪值填充传递给动作的对象，它会工作，但我无法从表单字段中提取数据。我甚至不清楚从哪里开始。任何方向都非常受欢迎。

在

mapDispatch

中，您无法从Redux状态或组件内部访问任何数据，因为它被用作围绕实际组件的包装组件的一部分（因此无法访问组件状态中的任何内容）

你的主要选择是：

• 将任何必要的值作为参数传递到函数中，如

  props.action（a、b、c）

• 切换到使用React-Redux钩子API（

  useSelector

  和

  useDispatch

  ），它允许您从函数组件内部的Redux存储访问数据。然后，您可以在定义单击处理程序时捕获这些值

---

另外，作为旁注：如果要使用

connect

，则应使用而不是将其定义为函数。

在

mapDispatch

中，您不能从Redux状态或组件内部访问任何数据，因为它是作为围绕实际组件的包装组件的一部分使用的（因此无法访问组件状态中的任何内容）

你的主要选择是：

• 将任何必要的值作为参数传递到函数中，如

  props.action（a、b、c）

• 切换到使用React-Redux hooks API（

  useSelector

  和

  useDispatch

  ），它允许您从函数组件内部的Redux存储访问数据。然后，您可以在定义单击处理程序时捕获这些值

---

另外，作为旁注：如果要使用

connect

，则应使用而不是将其定义为函数。

只需将onChange事件处理程序添加到三个字段中，并将每个输入的数据存储到组件状态。 然后在按钮上单击dispatch action，使用this.props.action和您所在州的数据。 通过这种方式，您可以将所有数据放入redux

render() { 
 return <button onClick={() =>this.props.toggleTodo(this.props.todoId)} />
} 

const mapDispatchToProps = dispatch => { 
    return { toggleTodo: todoId =>dispatch(toggleTodo(todoId)) } 
}

render（）{
返回this.props.toggleTodo（this.props.todoId）}/>
} 
const mapDispatchToProps=调度=>{
返回{toggleTodo:todoId=>dispatch（toggleTodo（todoId））}
}

---

作为参考-

您只需要将onChange事件处理程序添加到三个字段中，并将每个输入的数据存储到组件状态中。 然后在按钮上单击dispatch action，使用this.props.action和您所在州的数据。 通过这种方式，您可以将所有数据放入redux

render() { 
 return <button onClick={() =>this.props.toggleTodo(this.props.todoId)} />
} 

const mapDispatchToProps = dispatch => { 
    return { toggleTodo: todoId =>dispatch(toggleTodo(todoId)) } 
}

render（）{
返回this.props.toggleTodo（this.props.todoId）}/>
} 
const mapDispatchToProps=调度=>{
返回{toggleTodo:todoId=>dispatch（toggleTodo（todoId））}
}

供参考-