重写REDX调度函数作为组件

Question

我有一个调度函数来保存一个名字到Redux（从REDX文档中获得大部分代码）。

但是现在我想关注ComponentDidMount上的输入，但是我的SaveName函数不是一个组件，而是一个调度函数。我怎样才能重写它，所以我可以使用componentDidMount？

我的代码：

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; 

Answer 1

重写你的无状态组件的状态组件和使用ref，设置this.input是参考值。

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)); 

Answer 2

你可以把它改成一个组成部分。

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;