Question

我试图使用材料UI从两个文本字段获取两个日期，以便提交到rest 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个组件执行相同的操作，并且可能会对我的应用产生负面影响吗？

Answer 1

之所以发生这种情况，是因为您不应将数据作为onSubmit函数的参数传递：

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

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

将onSubmit更改为以下内容：

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

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

handleSubmit(event) {
   event.preventDefault();

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

尝试从“材质用户界面”文本字段中获取日期值

1 个答案: