[英]Rewrite redux dispatch function as component
I got a dispatch function to save a name to Redux (Got most code from the redux docs). 我有一个调度功能来将名称保存到Redux(从redux文档中获取了大多数代码)。
But now I want to focus on the input on ComponentDidMount, but my SaveName function isn't a component but a dispatch function. 但是现在我想集中精力于ComponentDidMount的输入,但是我的SaveName函数不是组件,而是分派函数。 How can I rewrite it so I can use componentDidMount?
如何重写它,以便可以使用componentDidMount?
My code: 我的代码:
import React from 'react';
import {connect} from 'react-redux';
import {saveName, feedbackInput} from '../actions/';
import { withRouter } from 'react-router-dom';
// http://redux.js.org/docs/basics/ExampleTodoList.html
let SaveName = ({ dispatch }) => {
let input;
return(
<form id="name" onSubmit={e => {
e.preventDefault()
if (!input.value.trim()) {
return
}
dispatch(saveName(input.value))
input.value = ''
}}
>
<input type="text"
name="text"
onClick={e => {
e.preventDefault()
dispatch(feedbackInput(input.value))
}}
onChange={e => {
e.preventDefault()
dispatch(feedbackInput(input.value))
}}
ref={
node => {
input = node
}
} />
<button className="submit-btn" type="submit"></button>
</form>
)
}
SaveName = withRouter(connect()(SaveName));
export default SaveName;
Rewrite your stateless component as stateful component and use ref
that sets this.input
to be ref value. 将无状态组件重写为有状态组件,并使用
ref
this.input
设置为ref值。
class SaveName extends React.Component {
componentDidMount() {
this.input.focus()
}
render() {
const { dispatch } = this.props
return(
<form id="name" onSubmit={e => {
const {input} = this
e.preventDefault()
if (!input.value.trim()) {
return
}
dispatch(saveName(input.value))
input.value = ''
}}
>
<input type="text"
name="text"
ref={input => this.input = input}
onClick={e => {
e.preventDefault()
dispatch(feedbackInput(this.input.value))
}}
onChange={e => {
e.preventDefault()
dispatch(feedbackInput(this.input.value))
}}/>
<button className="submit-btn" type="submit"></button>
</form>
)
}
export default withRouter(connect()(SaveName));
You can change it to a component. 您可以将其更改为组件。
import React from 'react';
import {connect} from 'react-redux';
import {saveName, feedbackInput} from '../actions/';
import { withRouter } from 'react-router-dom';
// http://redux.js.org/docs/basics/ExampleTodoList.html
class SaveName extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.props.dispatch(saveName('[YOUR_VALUE]'))
}
render() {
return(
// return your components
)
}
}
const SaveNameComponent = withRouter(connect()(SaveName));
export default SaveNameComponent;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.