Question

我想知道是否可以通过获取react组件来发送不在react组件中的表单。

<form action="json.bc" class="form_search" method="post">
  <input type="hidden" name="Firstname" value="">
  <input type="hidden" name="Familyname" value="">
  <!-- ... -->
</form>
<div id="Result"></div>

表格class="form_search"在<div id="Result"></div>的外面。我想在react组件中提交表单。

class App extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      data: []
    };
  }

  componentDidMount() {
    fetch("/json.bc", {
      method: "POST"
    })
      .then(response => response.text())
      .then(text => {
        var Maindata = JSON.parse(text.replace(/\'/g, '"'));
        this.setState(
          state => ({
            ...state,
            data: Maindata
          }),
          () => {}
        );
      })
      .catch(error => console.error(error));
  }

  render() {
    const { data } = this.state;
    const renderInfo = data.map((item, i) => {
      return <span>{item.name}</span>;
    });
    return <div class="loading_content">{renderInfo}</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("Result"));

实际上，我希望组件中有另一个fetch（）请求来提交此表单，但是我不能在组件中添加表单。

Answer 1

在表单标签onSubmit事件<Form onSubmit={this.handleSubmit}>上添加

您还需要在Form内添加一个按钮，以提交“发件人”。

<button>Submit</button>

如何在React中提交表单

1 个答案: