Javascript 在React中拾取未更改的默认值

我试着教自己用一个简单的应用程序（我也有一个工作的后端）对电影和分类做出反应。我试图实现的是允许改变整个电影对象（好吧，现在只是名称和/或年份，但实际上更多的是关于原理）。我想实现的是，当我只更改年份时，年份将从onChange中提取，名称将作为最初填写的默认值。我的后端使用按id查找，所以除非我触摸它，否则也不会发送，因为我没有实际更改它-这当然是有意义的。我似乎不知道如何添加到发送到后端应用程序的对象。请将未更改的值放在输入框中。这是我的代码（目前有点不稳定，但实际上是在试图弄清楚原理，而不是其他任何东西）。非常感谢您的帮助

哦，我看了文档，问题是我不确定我首先要找的是什么，这是我通过文档和一些例子弄明白的。我真的是个初学者，所以请温柔一点：）

---

我要做的是：创建一个类似于处理API调用的

handleAppicall

的函数，在

componentDidMount

，

handleSubmitChange

中调用这个函数，然后回答您的问题，在所有

handleChange…

函数中。我想我有点理解这里的想法，但是我还有一个问题-假设我的原始电影集有10个电影对象，那么我的表将显示10行，每行在最后一列中都有一个“更改”按钮，如何将此特定按钮绑定到同一行发送id。比如，如果我在第3行单击“更改”，但没有触及id，我如何传递按钮被按下的行？将id作为参数传递。我在帖子后面附加了我如何尝试这样做，但这不是应该怎么做的，你能用这个为我指出正确的方向吗？你可以从你的活动中获得电影id。下面是一个示例，我将使用输入字段的name属性：

handleChange（event）{this.setState（{[event.target.name]：event.target.value}）；}

在本例中，我使用该名称更新与该名称对应的状态。

import React from 'react';
import API from './utils/API';

export default class MoviesModify extends React.Component {
  state = {
    movies: []
  }
  componentDidMount() {
    API.get(`/movies`)
      .then(res => {
        const movies = res.data;
        console.log(movies);
        this.setState({ movies });
      })
  }
  handleChangeId = event => {
    this.setState({ idInp: event.target.value });
  }
  handleChangeName = event => {
    this.setState({ nameInp: event.target.value });
  }
  handleChangeYear = event => {
    this.setState({ yearInp: event.target.value });
  }

  handleSubmitChange = event => {
    const movie = {
      id: this.state.idInp,
      name: this.state.nameInp,
      year: this.state.yearInp
    };
    console.log(movie);
    API.put(`/movies`, movie)
      .then(res => {
        console.log(res);
        console.log(res.data);
      }).catch(err => { console.log(err) });
    //window.location.reload();
  }

  handleRemoveId = event => {
    this.setState({ idRem: event.target.value });
  }
  handleRemoveName = event => {
    this.setState({ nameRem: event.target.value });
  }
  handleRemoveYear = event => {
    this.setState({ yearRem: event.target.value });
  }  

  handleSubmitRemove = event => {
    event.preventDefault();
    const movie = {
      name: this.state.nameInp,
      year: this.state.yearInp
    };
    console.log("this.state");
    console.log(this.state);
    API.delete(`/movies/` + this.state.idRem)
      .then(res => {
        console.log(res);
        console.log(res.data);
      }).catch(err => { console.log(err) });
    window.location.reload();
  }

render() {
return (
<div className="container">
  <div className="left" style={{'float': 'left', 'width': '40%'}}>
    <div className="leftHeader" style={{'verticalAlign': 'top'}}>
        <h1>Change Movie</h1>
    </div>
    <div className="leftBody" style={{'verticalAlign': 'bottom'}}>
    <form onSubmit={this.handleSubmitChange}>
      <table border="1">
        <thead>
          <tr>
            <th>movie.id</th>
            <th>movie.name</th>
            <th>movie.year</th>
            <th>Categories</th>
            <th>Change</th>
          </tr>
        </thead>
        { this.state.movies.map((movie, j)=> <tbody className="tableBody" key={j}>
          <tr>
            <td><input type="text" name="id" onChange={this.handleChangeId} defaultValue={movie.id}/></td>
            <td><input type="text" name="name" onChange={this.handleChangeName} defaultValue={movie.name}/></td>
            <td><input type="text" name="year" onChange={this.handleChangeYear} defaultValue={movie.year}/></td>
            <td>{movie.Categories.map((category, i) => category.name + (movie.Categories[i + 1] ? ", " : ""))}</td>
            <td align = "center"><button type="submit">Change</button></td>
          </tr>
        </tbody>)}
      </table>
      </form>
    </div>
  </div>
  <div className="right" style={{'float': 'right', 'width': '50%'}}>
    <div className="rightHeader" style={{'verticalAlign': 'top'}}>      
        <h1>Remove Movie</h1>
    </div>
    <div className="rightBody" style={{'verticalAlign': 'bottom'}}>
    <form onSubmit={this.handleSubmitRemove}>
      <table border="1">
        <thead>
          <tr>
            <th>movie.id</th>
            <th>movie.name</th>
            <th>movie.year</th>
            <th>Remove</th>
          </tr>
        </thead>
        <tbody className="tableBody">
          <tr>
            <td><input type="text" name="id" onChange={this.handleRemoveId} /></td>
            <td><input type="text" name="name" onChange={this.handleRemoveName} /></td>
            <td><input type="text" name="year" onChange={this.handleRemoveYear} /></td>
            <td align = "center"><button type="submit">Remove</button></td>
          </tr>
        </tbody>
      </table>
      </form>
    </div>

  </div>
</div>
)
}
}

<input type="text" name="name" onChange={this.handleChangeName(movie.id)} defaultValue={movie.name}

handleChangeName = (event, movieId) => {
    this.setState({ nameInp: event.target.value });
    this.setState({ idRem: movieId });
  }