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

我有一个数据集呈现反应组件（食谱+配料清单）。数据最终将作为对象存储在本地存储中。当用户点击“编辑”按钮时，文本变为文本输入，以便用户可以编辑食谱。这里是a fiddle，它给你我想要实现的想法。React - 如何更新文本输入更改的整个数据集？

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

在此先感谢！

来源

2017-07-29 asparism

我很难跟随你的建议，我认为这是问题的指示。我会将所有状态（食谱，配料）存储在一个组件中。这个组件还会定义函数来调用某些触发器来改变食谱/配料（可能是提交表单或其他东西）。您将该函数传递给子组件。例如，便于添加新配方的子组件会在提交时调用addRecipe函数（或其他），状态会更新并且渲染会自动更新。 – dpwrussell

我解决了代码的一些问题：

1，输入是一种处方分量，这是一个框组件，我试图通过细节的孩子的孩子。我确保道具直接从道具传递到道具，而不需要通过配方组件中的函数。第二，因为我没有通过配方组件中的任何函数传递数据，所以我将函数绑定到了我调用它的地方（渲染），而不是在构造函数中。

3日，当绑定的功能，并传递参数，我通过this然后data，但是当我收到的函数的参数，顺序相反，服用data第一，然后event。

来源

2017-07-29 22:20:05 asparism

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

现在，每次更新任何价值时，应该通过更新来的setState状态，然后做出反应将决定是否认为应更新与否。

我已经在你的提琴做了一些修改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} />

虽然，这是没有进行优化，但是您了解如何更新视图，如何维护状态以及如何将多个值从子项传递给父项。

来源

2017-07-30 11:29:06 adhodi

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

回答

相关问题