Submitting via button click from different component

Question

I want to submit the results of a form when the user clicks a button, but, the button is not embedded within the form itself. I want to put my button in my app component, so I followed the highest rated suggestion here:

How to submit form from a button outside that component in React?

but it doesn't work. Here is my code:

textbox.jsx

import React, { Component } from "react";

class TextBox extends React.Component {
  render() {
    return (
      <form id="my-form" onSubmit={this.mySubmitHandler} className="textarea">
        <textarea
          className="textarea"
          placeholder={"Enter text in " + this.props.language}
          value={this.props.input}
          type="text"
          name="equation"
          onChange={this.handleInputChange}
          onKeyDown={this.keyPress}
        />
      </form>
    );
  }
  handleInputChange = event => {
    event.preventDefault();
    this.setState({
      [event.target.name]: event.target.value
    });
    this.props.inputChange(event.target.value);
  };

  mySubmitHandler = event => {
    console.log("SUBMIT");
    event.preventDefault();
    this.props.formSubmitted();
  };

  keyPress = event => {
    if (event.keyCode == 13 && event.shiftKey == false) {
      this.mySubmitHandler(event);
    }
  };
}

export default TextBox;

app.js

class App extends React.Component {
  render() {
    return (
      <button id="my-form" className="Submit" type="submit"></button>
      <div className="textContainer">
        <div className="LeftText">
          <TextBox
            autotranslate={this.state.auto_translate}
            formSubmitted={this.formSubmitted}
            inputChange={this.inputChange}
            input={this.state.input}
            language={this.state.languages[this.state.source_i]}
          />
        </div>
     );
  }
}

Please add all code necessary for MINIMAL PRODUCIBLE example, your code won't even compile. [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) — Dennis Vash, Dec 17 '19 at 10:26

score 2 · Accepted Answer · answered Dec 17 '19 at 10:29

Try adding form attribute to your button:

<button form="my-form" id="my-form" type="submit">
  Submit
</button>

import React from 'react';
import ReactDOM from 'react-dom';

class TextBox extends React.Component {
  render() {
    return (
      <form id="my-form" onSubmit={this.mySubmitHandler}>
        <textarea />
      </form>
    );
  }

  mySubmitHandler = event => {
    console.log('SUBMIT');
    event.preventDefault();
  };
}

class App extends React.Component {
  render() {
    return (
      <>
        <TextBox />
        <button form="my-form" type="submit">
          Submit
        </button>
      </>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Submitting via button click from different component

1 Answers1