在 React 中使用状态数组添加用户输入答案

【问题标题】：Adding user input with state array in React在 React 中使用状态数组添加用户输入
【发布时间】：2021-11-25 09:30:48
【问题描述】：

我在一个单独的文件中有一个现有的数据数组，我通过用户输入添加到该文件中。我正在接受的用户输入是 3 部最喜欢的电影。我能够接收其余数据并将其推送到现有文件中。我不确定状态数组是否让我失望，但我无法将 3 个字符串添加到数组中。

我的状态如下：

this.state = {
  isActive: false,
  id: 25,
  name: { first: "", last: "" },
  city: "",
  country: "",
  employer: "",
  title: "",
  favoriteMovies: ['', '', '']
};

我将用户输入的状态设置如下：

 handleFavoriteMoviesChange = (e) => {
    this.setState({ favoriteMovies: [...this.state.favoriteMovies, e.target.value]})
 };

这是我的 3 个输入字段：

    <input
      placeholder="favorite movies"
      value={this.state.favoriteMovies[0]}
      onChange={this.handleFavoriteMoviesChange}
    />
    <input
      placeholder="favorite movies"
      value={this.state.favoriteMovies[1]}
      onChange={this.handleFavoriteMoviesChange}
    />
    <input
      placeholder="favorite movies"
      value={this.state.favoriteMovies[2]}
      onChange={this.handleFavoriteMoviesChange}
    />

【问题讨论】：

标签： javascript arrays reactjs state

【解决方案1】：

如果您想在其特定索引上设置favoriteMovies 的值，则可以setState 如下：CODESANDBOX DEMO

  handleFavoriteMoviesChange = (e, index) => {
    this.setState({
      favoriteMovies: this.state.favoriteMovies.map((movie, i) => {
        if (i === index) return e.target.value;
        return movie;
      })
    });
  };

并调用handleFavoriteMoviesChange：

<input
  placeholder="favorite movies"
  value={this.state.favoriteMovies[0]}
  onChange={(e) => this.handleFavoriteMoviesChange(e, 0)}
/>
<input
  placeholder="favorite movies"
  value={this.state.favoriteMovies[1]}
  onChange={(e) => this.handleFavoriteMoviesChange(e, 1)}
/>
<input
  placeholder="favorite movies"
  value={this.state.favoriteMovies[2]}
  onChange={(e) => this.handleFavoriteMoviesChange(e, 2)}
/>

【讨论】：

工作，谢谢。正如我所理解的，handle 函数正在为 favoriteMovies 设置状态并使用 map 创建一个新数组。检查'i'是否与渲染中输入的值中的索引匹配，如果它确实返回输入，如果不返回'movie'？
没错。我想补充更多。您只需要两件事来设置值1) index 和2) value。我们在外部传递这两个值。您可以从e.target.value 获得value，但您还需要拥有index。因此，我将函数传递为this.handleFavoriteMoviesChange，而是传递了一个新函数，该函数在内部调用this.handleFavoriteMoviesChange，其值value 和index。
如果您在input 上使用map，还可以看到SANDBOX LINK 以简化更多，如果favoriteMovies 超过3 个，则可以使用。