永远不会调用Reactjs表单onSubmit

Question

我有一个表单和一个handleubmit函数。单击提交按钮时没有任何反应。我是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

嗯..我不明白你的代码不工作..

你查看了反应文档的示例代码，也许你可以这样做。

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')
);