针对初学者的React Crash课程，第4部分

在我们的React系列的最后一篇教程中，我们将创建一个新的<AddMovie />组件，用于通过自定义表单手动添加新电影。 这将使“ Movie Mojo”应用程序的开发结束。

可以通过屏幕右侧的链接下载最终项目的代码（您可能需要向下滚动）。 稍后，我将提供有关如何在系统上启动和运行项目的分步说明。

创建AddMovie组件

<AddMovie />组件输出一个表单，允许用户手动输入有关单个电影的详细信息，并在提交表单后将其添加到图库中的现有电影中。

该表格需要三个文本输入，分别用于标题，年份和海报图像。 加上用于电影描述的文本区域。 在/src/components/ ，创建一个名为AddMovie.js的新文件，并添加以下内容：

import React, { Component } from 'react';

class AddMovie extends Component {
  render() {
    return (
      <form className="movie-form">
        <p>Add a Movie</p>
        <input ref={ ( input ) => this.title = input } type="text" placeholder="Title" />
        <input ref={ ( input ) => this.year = input } type="text" placeholder="Year" />
        <input ref={ ( input ) => this.poster = input } type="text" placeholder="Poster" />
        <textarea ref={ ( input ) => this.description = input} placeholder="Description">
        </textarea>
        <button type="submit">Add Movie</button>
      </form>
    );
  }
}

export default AddMovie;

React ref属性将对每个表单输入字段的引用存储为组件类属性。 我们将很快使用这些引用作为轻松获取输入字段值的方法。

不过，首先，请向App.css添加以下样式，以使表单更加美观：

/* movie form styles */

.movie-form {
  width: 250px;
  margin: 0 auto;
}

.movie-form input, .movie-form textarea {
  width: 250px;
  font-size:14px;
  padding: 5px;
  margin: 5px;
}

.movie-form button {
  font-size: 16px;
  padding: 4px;
  margin: 10px 10px 30px 10px;
}

在App.js ，在结束的<div>包装器元素内添加<AddMovie />组件：

<AddMovie />

然后，在文件顶部，导入<AddMovie />组件以使其可用。

import AddMovie from './AddMovie';

您的“电影Mojo”应用现在应在浏览器窗口底部显示一个表单。

我们需要指定一个回调方法，该方法在提交表单时执行，我们可以使用该方法来创建新电影。 将此添加到<form>元素：

onSubmit={(e) => this.addNewMovie(e)}

然后，将addNewMovie()方法添加到<AddMovie />组件类的顶部：

addNewMovie(e) {
  e.preventDefault();
  var movie =  {
    title: this.title.value,
    year: this.year.value,
    description: this.description.value,
    poster: this.poster.value
  };
  console.log(movie);
}

第一个任务是防止触发默认的提交事件，我们使用e.preventDefault() 。 否则，提交表单后，网页将自动刷新，这不是我们想要的。

然后，我们通过获取之前方便地存储为组件类属性的表单输入字段值来创建新的电影对象。

console.log()命令输出movie对象，因此我们可以测试表单提交后是否正确创建了该movie对象。

对正确生成movie对象感到满意之后，请继续并删除console.log()调用。

为了在我们的画廊中显示新电影，我们需要将其添加到movie状态对象。 一旦完成，React将为我们更新DOM。

为此，请在App.js （应用程序状态对象所在的位置）中创建一个新方法，以处理将影片添加到当前状态的过程。

addMovieToGallery( movie ) {
  console.log( 'mooooooovie', movie );
}

不要忘了将新方法绑定到this因此在整个类中都可以使用它。

this.addMovieToGallery = this.addMovieToGallery.bind( this );

顺便说一句，您可能想知道为什么我们需要在这里执行此操作，而不需要为添加到上述<AddMovie />组件中的addNewMovie()方法执行此操作。 这是使用ES6箭头的功能，因为它会自动绑定的副作用， this给你。 这个小技巧很值得记住，因为它减少了代码的复杂性，同时提高了代码的可读性。

要在我们的<AddMovie />子组件代码中使用addMovieToGallery() ，我们只需通过props传递对其的引用。 在App.js ，将<AddMovie />调用更新为：

<AddMovie addMovie={this.addMovieToGallery} />

返回AddMovie.js ，更新addNewMovie()方法，以通过刚刚创建的addMovie道具将影片对象传递给addMovieToGallery()方法。

addNewMovie(e) {
  e.preventDefault();
  var movie =  {
    title: this.title.value,
    year: this.year.value,
    description: this.description.value,
    poster: this.poster.value
  };
  this.props.addMovie( movie );
}

现在，当我们填写表单时，我们像以前一样将电影对象输出到控制台，但是这次是通过<App />组件中的addMovieToGallery()方法。

删除addMovieToGallery()的console.log()命令，并将其替换为以下代码，以将输入的电影详细信息添加到movies状态对象：

addMovieToGallery( movie ) {
  var ts = Date.now();
  var newMovie = {};
  newMovie[ 'movie' + ts ] = movie;
  var currentMovies = { ...this.state.movies };
  var newMovies = Object.assign( currentMovies, newMovie );
  this.setState({ movies: newMovies });
}

这与我们在第三部分中对loadAdditionalMovies()方法所做的非常相似。 主要区别在于，需要为每个其他电影条目动态生成唯一密钥。 这可以通过将当前时间戳用作唯一键并将其附加到movie上来实现。

这将导致通过表单添加的每个其他电影都具有唯一的键。

movie1501686019706
movie1501686027906
movie1501686032929

... 等等。

在浏览器中打开“ Movie Mojo”应用程序，然后通过表单将两部新电影添加到图库中。 为了方便起见，在./public/posters/文件夹中添加了额外的电影海报图像，因此您可以轻松地测试将电影添加到图库中。 您可以通过下载完成的应用程序项目来访问它们。

每次提交表单时，都会在图库中添加其他电影！

安装电影Mojo

单击右侧的链接（大约在页面的一半），以下载完成的“ Movie Mojo”项目zip文件。 解压缩后，打开命令行窗口并导航到movie-mojo目录，然后输入：

npm install

这将需要几分钟的时间来下载运行项目所需的所有“ Node.js”模块。

然后输入：

npm start

这将编译React应用程序，并通过专用的小型Web服务器在浏览器中打开它。

结论

在这个由四部分组成的教程系列中，我们已经介绍了很多内容，因此，如果您已经编写了完整的教程并紧随其后，则表示祝贺。

现在，您应该对React的基础感到满意，这有望使您有信心继续开发更复杂的应用程序。

我建议下载“ Movie Mojo”项目并检查源代码，以确保您理解它们如何组合在一起。

有很多扩展应用程序的范围，那么为什么不尝试提出一些新的额外功能呢？ 通过尝试向应用程序实现新的React元素，这也是巩固学习的一种好方法。

您可以考虑添加以下一些想法：

我很乐意通过以下评论听到您对本教程的任何反馈。 您是否觉得易于遵循，还是遇到了麻烦？ 我一直在努力使自己的教程变得更好，因此反馈总是很受欢迎。

快乐的React编码！

翻译自: https://code.tutsplus.com/tutorials/react-crash-course-for-beginners-part-4--cms-29294