Question

我有一个表单和一个handlesubmit函数。单击提交按钮后，将不会发生任何事情。我是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}。但是，当单击发送按钮时，仍然没有任何反应。按钮之前没有包含一些输入字段。

Answer 1

嗯。。我不明白您的代码无法正常工作。

您可以查看react docs示例代码，也许您可以这样做。

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

FILE

从不调用Reactjs的onSubmit形式

1 个答案: