我们构建一个表单并在父组件中调用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开发的文章。如果您喜欢这篇文章，请随时与您的朋友和同事分享。

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