Использование функции onSubmit в другом классе (REACT.js)

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;

Когда приложение Publish function onSubmit было в приложении, оно работало.Но сейчас, когда я нажимаю кнопку, ничего не происходит.Как я могу это исправить?

Answer 1

Это не так, как вы должны реагировать.Очевидно, что, как указано в другом ответе , вы можете использовать:

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

Или просто экспортировать функцию и использовать ее.

Но такая реализация будет стоитьсильно для тебя.Например, будет сложно поддерживать штаты.Итак, я бы посоветовал вам предоставить родительскую обертку и в ней предоставить реквизиты для обработчиков событий, таких как:

<ParentComponent onSubmit={this.onSubmit}>

И в дочернем компоненте перехватите это событие.Например:

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

Для получения дополнительной помощи вы можете заглянуть в другой пост: вызов родительского метода в дочернем компоненте

Надеюсь, это имеет смысл!

Answer 2

Publish является классом, а не экземпляром, поэтому Publish.onSubmit - onSubmit не является полем класса , а не статическим методом .

Если бы 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 функция внутри конструктора.

Живой фрагмент:

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>