Reactjs 如何将access方法dispatch（）放入类的组件中

下午好！我开始处理

react-redux

，并一度陷入困境。我不知道如何访问组件本身内部的

dispatch

方法。问题是，我试图从表单字段中获取数据。在

mapDispatchToProps

方法中，我无法获取

refs

。如何正确地做到这一点，请告诉我

例如： index.js

从“React”导入React
从“react dom”导入react dom
从“react redux”导入{Provider}
从“./store”导入存储
从“./App”导入应用程序
const rootElement=document.getElementById（'root'））
ReactDOM.render(
,
根元素
)

代码是在这里输入的，可以输入语法。。。 App.js

//导入。。。
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.title=React.createRef（）；
this.message=React.createRef（）；
}
//想法1
onSubmitHandler_1=e=>{
e、 预防默认值（）；
//如何获取store.dispatch（{type:“UPDATE”，this.title.current.value，this.message.current.value}）；
};
render（）{
返回(
发送
);
}
}
const mapDispatchToProps=（状态，ownProps）=>{
返回{}；
};
//想法1；
const MAPDISPACHTOPROPS=（调度，ownProps）=>{
返回{
onSubmitHandler_2:e=>{
e、 预防默认值（）；
//哦…不！！！坏主意。。。
//让inputTitle=e.target.querySelector（'[name=“title”]'）；
//让inputTitle=e.target.querySelector（'[name=“password”]'））
分派（{type:“UPDATE”}）；//
//如何访问字段或引用？？
}
};
};
导出默认连接（mapDispatchToProps、mapDispatchToProps）（应用程序）；

如果未使用

mapDispatchToProps

则不应向

连接功能传递任何信息。通过这种方式，
dispatch
功能作为组件的道具提供

因此，如果您将组件导出为

//第一个是“mapStateToProps”，而不是代码中的“mapDispatchToProps”
导出默认连接（MapStateTops）（应用程序）

您可以在提交处理程序中使用
this.props.dispatch
。比如

onSubmitHandler=（事件）=>{
this.props.dispatch（{type:'SOME_ACTION'，foo:'bar}）
}


此外，使用动作创建者可能更容易/更好

//在某些actions.js文件或其他文件中
导出常量更新方法=（数据）=>{
返回{
键入：“更新”，
有效载荷：数据，
//或从数据对象映射特定属性
}
}
//在您的组件中
从“./actions.js”导入{updateMething}
类应用程序扩展了React.Component{
//…所有其他代码。。
submitHandler=（事件）=>{
//这些值在状态变量中也可能更好
常数数据={
标题：this.title.current.value，
消息：this.message.current.value
}
this.props.updateMething（数据）
}
}
const mapDispatchToProps={
更新方法，
}
导出默认连接（mapStateToProps、mapDispatchToProps）（应用程序）


如果要映射两个函数和并在组件中使用dispatch函数，可以这样做：

import React from 'react'
import ReactDOM from 'react-dom'

import { Provider } from 'react-redux'
import store from './store'

import App from './App'

const rootElement = document.getElementById('root')
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
)

// imports ...
class App extends React.Component {
  constructor(props) {
    super(props);
    this.title = React.createRef();
    this.message = React.createRef();
  }

  // Idea 1
  onSubmitHandler_1 = e => {
    e.preventDefault();
    // how get store.dispatch({type:"UPDATE", this.title.current.value, this.message.current.value});
  };

  render() {
    return (
      <form onSubmit={this.props.onSubmitHandler_1 OR this.onSubmitHandler_2}>
        <input type="text" ref={this.title} name="title" />
        <input type="password" ref={this.message} name="password" />
        <button>Send</button>
      </form>
    );
  }
}

const mapDispatchToProps = (state, ownProps) => {
  return {};
};

// Idea 1;
const mapDispacthTOProps = (dispatch, ownProps) => {
  return {
    onSubmitHandler_2: e => {
      e.preventDefault();
      // oh... no!!! bad idea...
      // let inputTitle = e.target.querySelector('[name="title"]');
      // let inputTitle = e.target.querySelector('[name="password"]')
      dispatch({ type: "UPDATE" }); //... ???? refs
      // how get access to fields or refs??
    }
  };
};

export default connect(mapDispatchToProps, mapDispacthTOProps)(App);