Question

我看了很多其他答案，但我无法理解。这是我的代码：

// userInputActions.js

...

export function dummy() {
    console.log('dummy function called');
}

...

// *userInputPage.js*

import * as userInputActions from '../actions/userInputActions';

class UserInput extends React.Component {
  constructor(props) {
    super(props);

    this.state = { 
    };

    // When un-commented it shows '*f dummy()*' is imported 
    // console.log('actions: ', userInputActions);

    this.dummy = this.dummy.bind(this);
  }

  render () {
    return (
      <div className="container-fluid align-items-center">
        <FieldLevelValidationForm onSubmit={this.dummy}/>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  });

const mapDispatchToProps = (dispatch) =>
  bindActionCreators(
    {
      ...userInputActions
    }, dispatch
  );

  export default connect(mapStateToProps, mapDispatchToProps)(UserInput);

注意'FieldLevelValidationForm'是redux-form，onSubmit是表单函数参数之一。

我尝试了各种各样的东西，但绑定功能不起作用。有人可以让我知道我哪里错了。我认为它与render（）函数和组件的生命周期有关，但我还不知道。

修改
谢谢 - 从所有答案中学到了很多东西。所有这些都有效。我希望我能给一个以上的复选标记。但是，我认为对我来说最合适的用法是将其称为道具并发送一个动作。

Answer 1

dummy函数作为道具传递，因此您应该使用this.props.dummy中的render()来访问它。

由于它没有使用this实例，因此也无需将其绑定到this。

Answer 2

您尝试绑定的虚拟函数不在this类中。所以它只会是：

this.dummy = userInputActions.dummy.bind(this);

Answer 3

缺少dummy的功能定义。

constructor(props) {
  super(props);
  this.state = { };
  this.dummy = this.dummy.bind(this);
}

dummy(e) {
  // form submission action
  userInputActions.dummy(); // maybe
}

render () {
  return (
    <div className="container-fluid align-items-center">
      <FieldLevelValidationForm onSubmit={this.dummy}/>
    </div>
  );
}

反应“无法读取未定义的属性'绑定'”

3 个答案: