Resact의 해당 구성 요소 외부에 있는 버튼에서 양식을 제출하는 방법?

Resact의 해당 구성 요소 외부에 있는 버튼에서 양식을 제출하는 방법?

내 리액션 컴포넌트 중 하나와 외부 컴포넌트 안에 있는 양식을 가지고 있는데, 그걸 리액션이라고 부르는 컴포넌트 안에 있는 버튼에 참조를 전달해서 그 버튼을 이용해서 제출도 할 수 있게 하고 싶다.

좀 더 명확하게 하기 위해 나는 다음과 같은 것을 가지고 있다.

import React, { Component } from "react";
import ReactDOM from "react-dom";

class CustomForm extends Component {
  render() {
    return (
      <form onSubmit={alert('Form submitted!')}>
        <button type='submit'>Inside Custom</button>
      </form>
    );
  }
}

function App() {
  return (
    <div>
      <CustomForm />
      <button>In Root</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

지금은 '맞춤형 내부' 버튼을 사용하여 양식을 제출할 수 있지만, 루트 구성 요소에 위치한 '뿌리 내' 버튼을 사용하여 양식을 제출할 수 있기를 바란다.버튼에서 사용자 정의 구성요소로 참조를 전달하고 실제로 양식을 제출할 수 있는 방법이 있는가?In Root버튼 클릭?

정규 HTML 기능(HTML Form Attribute)을 사용하여 이를 달성할 수 있으며, React hacks:

양식에 "id" 속성 추가: id='my-form'

class CustomForm extends Component {
    render() {
        return (
             <form id='my-form' onSubmit={alert('Form submitted!')}>
                // Form Inputs go here    
             </form>
        );
    }
}

그런 다음 양식 외부에 있는 대상 단추의 "양식" 속성에 동일한 ID를 추가하십시오.

<button form='my-form' type="submit">Outside Button</button>

이제 'Outside Button' 버튼은 마치 양식 안에 있는 것처럼 절대적으로 동일할 것이다.

참고: 이는 IE11에서 지원하지 않는다.

편집: 간단하고 정확한 답변: https://stackoverflow.com/a/53573760/5271656

반응에서 데이터는 아래로 흐르고 동작은 위로 흐른다.따라서 부모에서 단추를 클릭하면 하위 구성 요소에 대해 알리십시오.
이렇게 하면 된다.

import React, { Component } from "react";
import ReactDOM from "react-dom";

class CustomForm extends Component {
  handleOnSubmit = e => {
    e.preventDefault();
    // pass form data
    // get it from state
    const formData = {};
    this.finallySubmit(formData);
  };

  finallySubmit = formData => {
    alert("Form submitted!");
  };

  componentDidUpdate(prevProps, prevState) {
    if (this.props.submitFromOutside) {
      // pass form data
      // get it from state
      const formData = {};
      this.finallySubmit();
    }
  }

  render() {
    return (
      <form onSubmit={this.handleOnSubmit}>
        <button type="submit">Inside Custom</button>
      </form>
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      submitFromOutside: false
    };
  }
  submitCustomForm = () => {
    this.setState({
      submitFromOutside: true
    });
  };

  componentDidMount() {
    console.log(this.form);
  }

  render() {
    return (
      <div>
        <CustomForm submitFromOutside={this.state.submitFromOutside} />
        <button onClick={this.submitCustomForm}>In Root</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);  

나에게 이 해결책은 엉터리고 반응하는 방식이 아니라 당신의 사용 사례에 도움이 된다.
여기에서 작업 솔루션을 찾아보십시오.https://codesandbox.io/s/r52xll420m

예를 들어 주에서 적절한 플래그를 설정할 수 있다.rootBtnClicked: false그리고 클릭을 처리하는 방법App구성 요소또한 다음에도<CustomForm />, 소품을 추가한다. rootBtnClicked={this.state.rootBtnClicked}. "In Root" 버튼을 클릭하면 해당 메서드를 트리거한 다음, 메서드는 다음을 사용하여 상태를 변경한다.setState()그리고 그 안에CustomForm구성 요소의render()메소드, 소품 확인true. 이 경우 반응의 를 사용하여 수동으로 트리거하십시오.

이 해결책들 중 어느 것도 내게는 통하지 않았지만, 나는 마침내 그것을 하는 것으로 알아냈다.

document.forms[0].submit()

페이지에 양식이 하나밖에 없었기 때문에 0 인덱스로 선택했는데, 양식이 여러 개일 경우 양식 배열에 적용 가능한 색인을 사용해야 할 것 같아.

음, 버튼의 종류는submit및 속성form와 같은 가치를 지닌id제출하고자 하는 양식의

소품으로 제출 기능을 전달하고 원할 때마다 이 방법을 사용할 수 있다.더 복잡한 상황의 경우, 당신은 Redex에 당신의 양식 데이터를 저장하고 버튼을 클릭할 때마다 당신은 Redex에서 데이터를 읽고 제출한다.

다음과 같이 onSubmit 클릭 핸들러를 소품으로 전달할 수 있다.

import React, { Component } from "react";
import ReactDOM from "react-dom";

class CustomForm extends Component {

  render() {
    return (
      <form onSubmit={this.props.handleSubmit}>
        <button type='submit'>Inside Custom</button>
      </form>
    );
  }
}

function App() {
 handleSubmit = () => {
   alert('Form submitted!')
}
  return (
    <div>
      <CustomForm onSubmit={this.handleSubmit} />
      <button>In Root</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

양식 제출을 처리하기 위한 소품으로 기능을 전달하면 제출에 대한 비즈니스 논리가 CustomForm 구성요소에 속하지 않기 때문에 CustomForm 요소를 더 재사용할 수 있다.

참조URL: https://stackoverflow.com/questions/52577141/how-to-submit-form-from-a-button-outside-that-component-in-react