时间戳

首页 > 解决方案 > 如何在反应中提交表单

reactjs - 如何在反应中提交表单

问题描述

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

<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>. 我想在反应组件中提交表单。

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() 请求来提交这个表单，我也不能在组件中添加表单。

标签： reactjs

解决方案

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

您还需要在表单内有一个按钮，该按钮将提交 From。

<button>Submit</button>

推荐阅读