Question

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

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

提前致谢！

Answer 1

我在代码中解决了一些问题：

1，输入是配方组件的子项，它是我尝试传递详细信息的盒子组件的子项。我确保道具直接从道具传递到道具而没有在配方组件中运行功能。

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

第3，当绑定函数并传递参数时，我传递了this然后data，但是当我收到函数的参数时，顺序被反转，取data首先，然后是event。

Answer 2

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

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

现在，每次更新任何值时，都应该通过setState更新为state，然后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元素

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

虽然这没有得到优化，但您可以了解如何更新视图，如何维护状态以及如何将多个值从子节点传递到父节点。

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

2 个答案: