我们构建一个表单并在父组件中调用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
,我们需要将此功能向下传递到ItemForm
props中,这就是我们说的原因this.props.addItem
。
为了handleSubmit
被调用,我们需要将其添加到onSubmit
表单上的prop。onSubmit监视表单提交并调用我们传递给它的函数。
<form onSubmit={this.handleSubmit}>
...
</form>
太好了,现在我们的表单已经完成,可以将新的项目数据发送到该数据表App.js
以便添加到该项目集合中。
我们将在下一篇文章中介绍如何实际调用Axios并添加该项目。
我每天写有关Web开发的文章。如果您喜欢这篇文章,请随时与您的朋友和同事分享。
订阅我的时事通讯,您可以在收件箱中收到类似的文章。