javascript - 函数未定义错误reactjs

Question

我在 Action 文件中有一个函数，需要从带有参数的组件文件中调用它，但在调用它时，它给出函数未定义的错误

组件代码:

    handleClick(e){

         addinput({input1:this.refs.inp1.value,input2:this.refs.inp2.value}) // This function I have defined in action file

      }

操作文件代码:

export function addinput(myval1) {
 return {
   type: 'ADD_INPUT',
   payload: myval1
 };
}

我在控制台中收到以下错误

Uncaught ReferenceError: addinput is not defined

我在这里做错了什么!!

Answer 1

您需要做的是从组件中的操作文件导入函数，例如

import {addinput} from './path/to/action'

并且我假设您使用 redux，您可以使用 connect 和 bindActionCreators 函数将操作绑定(bind)到 props

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'

...

class MyComponentName extends React.Component{

  handleClick = (e) => {
        this.props.addinput({input1:this.refs.inp1.value,input2:this.refs.inp2.value}) 

      }
}

function mapDispatchToProps(dispatch){
     return bindActionCreators({addInput}, dispatch)
}
export default connect(null, mapDispatchToProps)(MyComponentName)