Question

我在app.js中有按钮，我想使用另一个函数中的事件onSubmit。但是，当我尝试时-没有任何反应。

App.j s

import React, { Component } from 'react';

import Publish from './Publish';

class App extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
        <div>
          <form onSubmit={Publish.onSubmit}>
              <button></button>
          </form>
        </div>
    );
  }
}

export default App;

Publish.js

import React, { Component } from 'react';
  import web3 from './web3';
  import auth from './multiauth';

  class Publish extends Component {
    constructor(props){
      super(props);
      this.state = {
        // some data
       };
    }

   componentDidMount(){
      fetch('url')
        .then(res => res.json())
        .then(json => {
          this.setState({
            //some data
          })
        })
    }

    onSubmit = async (event)=>{
        //some functional
  }

  export default Publish;

在应用中发布function onSubmit时，它起作用了。但是现在，当我按下按钮时，什么也没有发生。我该如何解决？

Answer 1

Publish是类，而不是实例，因此没有Publish.onSubmit-onSubmit是 class字段，而不是 static方法。

如果onSubmit是常规方法，则它将是Publish.prototype的属性，您可以使用

<form onSubmit={Publish.prototype.onSubmit}>

您将只能使用

<form onSubmit={Publish.onSubmit}>

如果onSubmit是静态的（因此是类本身的属性），例如：

static onSubmit() {
  // do something
}

要将onSubmit设为常规方法，请将其语法更改为

onSubmit() {
  // do something
}

如果实例化Publish，并且需要this引用onSubmit中的实例，那么您还需要.bind构造函数中的函数。 / p>

实时摘要：

class Publish extends React.Component {
  onSubmit(event) {
    event.preventDefault();
    console.log('submit running');
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
        <div>
          <form onSubmit={Publish.prototype.onSubmit}>
              <button>button</button>
          </form>
        </div>
    );
  }
}

// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 2

这不是您应该采取的应对措施。显然，如another answer中指出的，您可以使用：

<form onSubmit={Publish.prototype.onSubmit}>

或者，只需导出函数并使用它。

但是，这样的实现对您来说将花费巨大。例如，将难以维持状态。因此，我建议您提供一个父包装器，并为事件处理程序提供道具：

<ParentComponent onSubmit={this.onSubmit}>

然后在子组件中，钩住该事件。例如：

<ChildComponent onSubmit={this.props.onSubmit}>

要获取更多帮助，您可以查看另一篇文章：call parent method in child component

希望，这很有道理！

在另一个类中使用函数onSubmit（REACT.js）

2 个答案: