通过来自不同组件的按钮单击提交答案

【问题标题】：Submitting via button click from different component通过来自不同组件的按钮单击提交
【发布时间】：2019-12-17 10:17:17
【问题描述】：

我想在用户单击按钮时提交表单的结果，但是该按钮并未嵌入到表单本身中。我想把我的按钮放在我的应用组件中，所以我在这里遵循了评分最高的建议：

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

但它不起作用。这是我的代码：

文本框.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>
     );
  }
}

【问题讨论】：

应用不渲染文本框
对不起，我省略了大部分代码，我会更新
请添加 MINIMAL PRODUCIBLE 示例所需的所有代码，您的代码甚至无法编译。 How to create a Minimal, Reproducible Example
任何控制台错误？

标签： html reactjs

【解决方案1】：

尝试将form attribute 添加到您的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'));

【讨论】：