javascript - 尝试从 Material UI 文本字段中获取日期值

Question

我试图使用材料 UI 从两个文本字段中获取两个日期，以便提交到休息 api 并获得结果。我对日期有一些问题，因为当我选择任何日期时，它会“提交”，我只想在单击提交按钮时提交。

<form
            onSubmit={this.formHandler(this.state.formFields)}
            style={{ display: "inline-flex", padding: "15px" }}
          >
            <Grid item xs>
              <TextField
                id="from"
                label="De"
                type="date"
                name="from"
                //value={this.name}
                defaultValue="2017-05-24"
                className={classes.textField}
                InputLabelProps={{
                  shrink: true
                }}
                formatDate={from => moment(from).format("DD-MM-YYYY")}
                //onChange={handleChange1.bind(this)}
                onChange={e => this.inputChangeHandler.call(this, e)}
                value={this.state.formFields.from}
              />{" "}
            </Grid>{" "}
            <Grid item xs>
              <TextField
                id="date"
                label="Até"
                type="date"
                name="to"
                //value={this.target.value}
                defaultValue="2017-05-24"
                className={classes.textField}
                InputLabelProps={{
                  shrink: true
                }}
                formatDate={date => moment(date).format("DD-MM-YYYY")}
                onChange={e => this.inputChangeHandler.call(this, e)}
                value={this.state.formFields.to}
              />{" "}
            </Grid>{" "}
            <Grid item xs>
              <Button
                type="submit"
                variant="contained"
                className={classes.button}
              >
                Submit{" "}
              </Button>{" "}
            </Grid>{" "}
          </form>


inputChangeHandler(e) {
    e.preventDefault();

    let formFields = { ...this.state.formFields };
    formFields[e.target.name] = e.target.value;
    this.setState({
      formFields
    });
    console.log(formFields.from);
    console.log(formFields.to);
  }

  formHandler(formFields) {
    axios
      .post("/api/register", formFields)
      .then(function(response) {
        console.log(response);
        //Perform action based on response
      })
      .catch(function(error) {
        console.log(error);
        //Perform action based on error
      });
  }

我怎样才能防止这种情况？任何人都可以帮忙，因为我认为我必须对其他 3 个组件做同样的事情，并且可能会对我的应用程序产生负面影响吗？

标签： javascriptreactjs

Answer 1

这是因为您不应该将数据作为 onSubmit 函数的参数传递：

onSubmit={this.formHandler(this.state.formFields)}

您可以按照建议在 formHandle 中访问您的状态React Form Documentation 。

将您的 onSubmit 更改为以下内容：

<form onSubmit={this.handleSubmit.bind(this)}>

然后在您的提交功能中，您可以访问您的状态：

handleSubmit(event) {
   event.preventDefault();

   // access your state here
   this.state.formFields
}