React - 如何在文本输入更改时更新整个数据集？答案

【问题标题】：React - How to update entire dataset on text input change?React - 如何在文本输入更改时更新整个数据集？
【发布时间】：2017-07-29 19:53:50
【问题描述】：

我有一个呈现反应组件的数据集（食谱 + 成分列表）。数据最终将作为对象存储在本地存储中。当用户单击“编辑”按钮时，文本变为文本输入，以便用户可以编辑食谱。这是a fiddle，它让您了解我想要实现的目标。

看了this question之后，我想我可以将需要更新的数据的索引和详细信息传递给父级，并根据新的更改重新渲染所有内容。这似乎在计算上效率不高，但我不确定有什么更好的选择。此外，当尝试将详细信息传递到事件链时，我收到一个错误：Uncaught ReferenceError: a is not defined（其中a 包含更新的详细信息）。我可以将多个参数传递给 onChange 处理程序（详细信息、事件）吗？有没有更好的方法来保存数据更新？这是a fiddle 我尝试传递细节的地方。它什么也不渲染；控制台给出了前面提到的错误。

提前致谢！

【问题讨论】：

我很难遵循您的建议，我认为这表明存在问题。我会将所有状态（食谱、成分）存储在一个组件中。该组件还将定义要调用的函数，以在某些触发器上更改食谱/成分（可能在提交表单或其他内容时）。您将该函数传递给子组件。例如，便于添加新配方的子组件将在提交时调用addRecipe 函数（或其他），状态将更新，渲染将自动更新。

标签： javascript reactjs events onchange

【解决方案1】：

我解决了代码中的几个问题：

第一，输入是配方组件的子组件，它是我试图传递细节的盒子组件的子组件。我确保道具直接从道具传递到道具，而不是通过配方组件中的函数。

第二，因为我没有通过配方组件中的任何函数传递数据，所以我将函数绑定在我调用它的同一位置（渲染），而不是在构造函数中。

3、绑定函数并传递参数时，我传递了this，然后传递data，但是当我收到函数的参数时，顺序颠倒了，先取data，然后是@ 987654324@.

【讨论】：

【解决方案2】：

您的数据更改未更新的原因是您没有维护组件的状态。你的状态应该是这样的

this.state = {
      readOnly: true,
      open: false,
      name:props.name,
      ingrs:props.ingrs
}

现在，每次更新任何值时，都应通过 setState 将其更新为状态，然后 react 将决定是否应更新视图。

我对你的小提琴https://jsfiddle.net/L6vnkvfa/1/做了一些改动

查看状态如何维护和主要更新功能

  onInputChangeIng(ele,id) {
     var ing = this.state.ingrs;      
     ing[id]=ele.value;
     console.log(ing);
     this.setState({ingrs:ing});
  }

另外，参考输入元素

<input type="text" ref={(input) => { this.textInput = input; }} onChange={()=>this.props.onChange(this.textInput,this.props.id)} defaultValue={this.props.text} />

虽然这不是优化的，但您知道如何更新视图、如何维护状态以及如何将多个值从子级传递到父级。

【讨论】：