Java编程网

分享 Java Web 开发相关知识

如何使用React提交表单

我们构建一个表单并在父组件中调用addItem函数

我们有一个React应用程序,显示使用Axios从远程API访问的项目列表。
我们还想创建一个新项目并将其发布到远程服务器,以便可以将其添加到项目集合中。

到目前为止,我们有一个名为的表单组件,ItemForm该组件收集项目名称并使用输入的名称更新状态。
但是我们的新项目除名称外还有其他属性,因此我们需要添加其他字段来处理这些属性。我们还需要创建一个函数,该函数在提交表单时触发并传输新的项目数据,以便可以将其添加到远程集合中。

让我们将这些额外的字段添加到表单中:

<form>
  <input
    type="text"
    name="price"
    onChange={this.changeHandler}
    placeholder="Price"
    value={this.state.item.price}
  />

  <input
    type="text"
    name="imageUrl"
    onChange={this.changeHandler}
    placeholder="Image URL"
    value={this.state.item.imageUrl}
  />

  <input
    type="text"
    name="description"
    onChange={this.changeHandler}
    placeholder="Description"
    value={this.state.item.description}
  />

  <button>Add new item</button>
</form>

现在我们有了所有必填字段。如果您注意到的话,每个字段值都来自ItemForm具有相应名称的state属性。
每个字段都有一个onChange属性,用于查找字段中的更改并通过该changeHandler函数更新状态。

由于changeHandler旨在处理任何字段名称,因此我们不必对其进行更新即可包含我们刚刚添加的其他字段。由于我们在函数定义中使用了以下语法,它可以无缝运行:

[e.target.name]: value

每个字段名称都是根据的name属性自动评估的input
只要字段名称prop对应于现有项属性,则每次触发更改事件时,就将值分配给状态的正确属性。

我们需要做的下一件事是在提交表单时调用一个函数。

该功能需要调用App.js组件中定义的另一个功能,该功能实际上会将项目添加到远程数据库中。

之所以定义其中的addItem函数,App.js是因为该App组件负责保持集合的状态,因此App在必须向集合中添加项目时才有意义。

通过单击“提交”按钮提交表单时调用的函数称为handleSubmit。这里是:

handleSubmit = event => {
  event.preventDefault();
  this.props.addItem(this.state.item);
}

handleSubmit有一个简单的工作。它只是在中调用addItem函数,App.js并传递item以状态保存的对象FormItem

该功能还阻止按下提交按钮时浏览器生成的默认操作。浏览器默认会尝试重新加载页面,但是我们希望对此操作进行控制,因此我们防止了默认情况的发生。

既然addItem是在中定义的App.js,我们需要将此功能向下传递到ItemFormprops中,这就是我们说的原因this.props.addItem
为了handleSubmit被调用,我们需要将其添加到onSubmit表单上的prop。onSubmit监视表单提交并调用我们传递给它的函数。

<form onSubmit={this.handleSubmit}>

  ...

</form>

太好了,现在我们的表单已经完成,可以将新的项目数据发送到该数据表App.js以便添加到该项目集合中。
我们将在下一篇文章中介绍如何实际调用Axios并添加该项目。


我每天写有关Web开发的文章。如果您喜欢这篇文章,请随时与您的朋友和同事分享。

订阅我的时事通讯,您可以在收件箱中收到类似的文章。

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注