永远不会调用 Reactjs 表单 onSubmit答案

【问题标题】：Reactjs form onSubmit is never called永远不会调用 Reactjs 表单 onSubmit
【发布时间】：2018-09-03 14:43:25
【问题描述】：

我有一个表单和一个句柄提交函数。单击提交按钮时，没有任何反应。我是 React 的新手，并且已经阅读了有关该主题的不同答案。这是我的代码

class MyPage extends React.Component<>
{
constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
}
  state = {
    saving: false,
    message: null
  };

  t = makeTranslations(translations, this.props.request.langCode);

  async handleSubmit(e) {
  try{
    console.log('-----------------Here I AM', e);
    e.preventDefault();
    this.setState({ saving: true });
    const data = new FormData(e.target);
    let req = await fetch('/api/list/waitinglist/',
      {
        method: "POST",
        body: data,
      }
    );
  }
  catch(e){
        console.log('caught error', e);
        // Handle exceptions
    }
  };
  render() {
    const csrf_token = this.props.request.csrf_token;
  return (
...
...
...
            <form onSubmit={this.handleSubmit}
              style={{
                maxWidth: 600,
                margin: "0 auto",
                padding: "40px 0",
                display: "flex",
                flexDirection: "column",
                alignItems: "stretch"
              }}
            >
          <input
            type="hidden"
            name="csrfmiddlewaretoken"
            value={csrf_token}
          />

...
.
...

....

      <Button type="submit" onClick={this.handleSubmit} style={{ alignSelf: "center" }}>
        {this.t("Send")}
      </Button>

我在构造函数中有this.handleSubmit.bind(this)。为了让它工作，我在提交按钮上放了onClick={this.handleSubmit}。但是单击发送按钮时仍然没有任何反应。在按钮之前有一些我没有包含的输入字段。

【问题讨论】：

为什么要使用生成器来实现简单的方法？在这种情况下不需要异步
添加或删除异步不会做任何事情。我的问题是让 onSubmit 以某种方式工作
Chrome 调试器控制台中的任何内容？听起来像一个错误正在阻止您的事件处理程序被连接（但它没有停止渲染）。
如果您创建另一个按钮并尝试触发另一个事件处理程序，那会起作用吗？今年早些时候Form onSubmit 出现了一些问题Form OnSubmit doesn't work.
@PatrickSteele 感谢您的指导。控制台显示错误TypeError: "Argument 1 of FormData.constructor does not implement interface HTMLFormElement."现在我会尝试解决这个问题

标签： reactjs

【解决方案1】：

嗯..我不明白你的代码不起作用..

你检查一下 react docs 示例代码，也许你可以这样做。

https://codepen.io/gaearon/pen/VmmPgp?editors=0010

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

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

【讨论】：