Question

我一整天都在尝试让它发挥作用。我正在构建一个食谱盒，当用户单击“添加食谱”或用户在预先存在的食谱上单击“编辑”时，我会弹出一个模态。所以AddBox是它自己的组件，可以处理添加和编辑（最终我希望）。问题是编辑，AddBox是它自己的组件，它是index.jsx文件的直接子组件，但是需要来自Recipe组件的信息（即需要编辑的配方，以填充AddBox以便用户可以编辑）。 Recipe组件是RecipeList的子组件，它是index.jsx的子组件。

以下是我想要发生的事情：

用户在他们想要编辑的任何给定食谱上单击“编辑”，将编辑的配方发送回index.jsx以更新状态（下面的recipeToEdit）
弹出模态框，文本区域元素填入了食谱信息，从index.jsx传递下来的状态
用户编辑，将配方保存到localStorage和州

这是触发回调功能的编辑按钮，弹出编辑模式：

    <button type='edit' id='editButton' className='btn' data-toggle='modal' data-target='#addPopUp' 
     onClick={event => this.props.handleRecipe(event.target.parentNode.parentNode.id, event.target.id)}>Edit</button>

这是传递给我的AddBox，一个处理程序和编辑自己的配方：

    <AddBox handleRecipe={this.handleRecipe.bind(this)} editRecipe={this.state.recipeToEdit} />

这是handleRecipe回调编辑的重要部分：

    else if (btnType === 'editButton') {  
    console.log('edit fired')          
        this.setState({
            recipeToEdit: recipeArr[ind]
        })
    }

因此用户单击编辑，调用此函数，recipeToEdit在状态下更新，其中包含已单击的配方对象，并将recipeToEdit传递给Addbox（参见上文）

但是在Addbox中，我尝试将props.editRecipe.recipeName等传递给州，因为我认为它会更新，但它不会...

            this.state = {
        recipeVal: props.editRecipe.recipeName,
        ingredientsVal: props.editRecipe.ingredients,
        instructionsVal: props.editRecipe.instructions
    };
}

我在下面的表格中的各个位置的addbox中显示这些内容。我完全失去了。

Answer 1

分享状态

您在这里做的是在组件之间共享状态。有两种广泛接受的好方法：

从使用它的顶级组件传递值和设置器
使用像Flux，Redux等的状态共享框架

在1.和2.中，重要的是，您不必将所选配方设置为组件的状态，直到从商店传递或顶级组件。始终让值进行往返，以确保Store / Top组件保持其他组件使用的值。

在您的情况下，共同的祖先似乎相当远，因此使用第二种方法可能更容易。你所做的是听取所选配方的一个共同状态（一些其他的，非反应组件，通常称为商店），当appripriate时，更改商店中的选定配方。

如果您不想使用第二个解决方案，您可以尝试让两个组件拥有更接近的共同祖先，或者您可以从index.jsx一直传递道具 - - 虽然后者可能不是一个好主意。

如何让两个不相关的React组件协同工作？

1 个答案:

分享状态