reactjs - 如何将访问方法 dispatch() 获取到类的组件中
问题描述
下午好!我开始处理react-redux
并在某一时刻陷入困境。我不知道如何访问dispatch
组件本身内部的方法。问题是,我正在尝试从表单字段中获取数据。在mapDispatchToProps
方法中,我无法得到refs
. 请告诉我如何正确执行此操作?
例如:index.js
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
)
代码是在这里输入的,可能在语法中打错了... App.js
// 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);
解决方案
如果您不使用,则不mapDispatchToProps
应将任何内容传递给该connect
函数。通过这种方式,该dispatch
函数作为组件提供给您的组件。
因此,如果您像这样导出组件
// First one is 'mapStateToProps', not 'mapDispatchToProps' like in your code
export default connect(mapStateToProps)(App)
您可以this.props.dispatch
在提交处理程序中使用。所以,像
onSubmitHandler = (event) => {
this.props.dispatch({ type: "SOME_ACTION", foo: "bar" })
}
此外,使用动作创建者可能更容易/更好。
// In some actions.js file or something
export const updateSomething = (data) => {
return {
type: "UPDATE",
payload: data,
// OR map specific attributes from the data object
}
}
// In your component
import { updateSomething } from './actions.js'
class App extends React.Component {
// .. all other code ..
submitHandler = (event) => {
// These values would probably also be better in state variables
const data = {
title: this.title.current.value,
message: this.message.current.value
}
this.props.updateSomething(data)
}
}
const mapDispatchToProps = {
updateSomething,
}
export default connect(mapStateToProps, mapDispatchToProps)(App)
如果您想映射几个函数并在组件中使用调度函数,您可以这样做:https ://react-redux.js.org/using-react-redux/connect-mapdispatch#defining-the -mapdispatchtoprops-function-with-bindactioncreators
推荐阅读
- r - 使用 na.omit 或 NA.RM 和 mapply 在 Datafrme 的多个列中忽略 R 中的 NA
- angular - 无法显示模态角度
- java - 如何将类型“java.lang.String”的值转换为属性“typeService”所需的类型“com.boots.models.TypeServiceModel”?(更新))
- html - 表格高度未正确分配
- java - 如何使用 QuantLib 在 Java 中进行期权定价?
- java - 从 mysql 返回到 java 的双精度值不正确
- laravel - Laravel路线,我找不到文件
- usb - 执行 libusb_control_transfer 时出现 libusb 错误
- java - 如何比较从后端获取的数据列表<>与 Ui 元素
- machine-learning - Sklearn 的 MultiOutputClassifier 有时在多标签多类分类任务中不输出任何类