在相同层次级别的子组件之间共享存储更改事件
Sharing store change event between same hierarchical level child components
我正在开发一个简单的 React JS 应用程序用于学习目的。我几天前才开始学习 React JS。现在,我遇到了 Flux Store 的问题。我需要在同一层级的两个子组件之间共享更改事件。
我有一个名为 TodoComponent 的父组件,定义如下
//Create
class TodoComponent extends React.Component{
constructor(props){
super(props)
}
render(){
return (
<div>
<div>
<ListComponent />
</div>
<AddItemComponent />
</div>
)
}
}
它有两个名为 ListComponent 和 AddItemComponent 的子组件。而且,我有一个商店有这个定义。
import { EventEmitter } from 'events';
class DataStore extends EventEmitter{
constructor()
{
super();
this.todos = [
"Eat",
"Sleep",
"Die",
"Shower"
];
}
getAll(){
return this.todos;
}
addItem(newItem)
{
this.todos.push(newItem);
this.emit("change")
}
}
const dataStore = new DataStore;
export default dataStore;
它具有向数组添加新项的功能和获取数组的功能。
这是显示来自 DataStore 通量存储的项目数组的 ListComponent。
import React from 'react';
import TodoItem from './TodoItem';
import DataStore from './data.store';
class ListComponent extends React.Component{
constructor(props)
{
super(props)
this.state = { todos : DataStore.getAll() };
}
componentWillMount(){
DataStore.on('change', () => {
//do somethif
this.state = { todos : DataStore.getAll() };
})
}
render()
{
var deleteItem = (item) => {
this.deleteItem(item);
}
var editItem = (item) => {
this.editItem(item);
}
var addItem = (newItem) => {
this.addItem(newItem);
}
var todos = this.state.todos.map((item, index) => {
return (
<TodoItem item={item} addItem={addItem.bind(this)} deleteItem={deleteItem} editItem={editItem} />
)
});
return (
<ul>
{todos}
</ul>
)
}
deleteItem(item)
{
this.setState({ todos: this.state.todos.filter((listItem, index) => {
return listItem !== item;
}) });
}
editItem(item)
{
alert(item)
}
addItem(newItem)
{
DataStore.addItem(newItem);
}
}
module.exports = ListComponent;
它正在更新 DataStore 存储的更改事件中的项目。但是我没有在 ListComponent 中调用 addItem 函数。我在 AddItemComponent 中调用它。
这是 AddItemComponent 的定义。
import React from 'react';
import DataStore from './data.store';
class AddItemComponent extends React.Component{
constructor(props)
{
super(props)
}
render()
{
return (
<form id="form-todo" onSubmit={this.addItem.bind(this)} action="post">
<input type='text' ref="newItem" />
<button>ADD</button>
</form>
);
}
addItem(e)
{
e.preventDefault();
DataStore.addItem(this.refs.newItem.value);
}
}
module.exports = AddItemComponent;
但是我在AddItemComponent中触发addItem函数时,ListComponent中DataStore的change事件没有被触发。那么,如何在同层级的两个组件之间同步Flux Store的变化事件呢?
我能想到的解决方案是在 TodoComponent(父组件)中使用 DataStore,并将数据和函数作为 props 发送给子组件。我认为,那样的话代码会变得有点乱。这是唯一的解决方案吗?
欢迎来到 React!我重新创建了您的示例,并且您的 "change" 事件在 ListComponent
中触发,但是要更新组件中的状态,您应该使用 this.setState(changes)
而不是 this.state = {changes}
。仅在构造函数中使用 this.state = {}
来设置初始状态。 setState
方法正确地流过 React 生命周期并导致组件使用新状态重新呈现。 React 的状态和生命周期钩子有官方指南 here.
我正在开发一个简单的 React JS 应用程序用于学习目的。我几天前才开始学习 React JS。现在,我遇到了 Flux Store 的问题。我需要在同一层级的两个子组件之间共享更改事件。
我有一个名为 TodoComponent 的父组件,定义如下
//Create
class TodoComponent extends React.Component{
constructor(props){
super(props)
}
render(){
return (
<div>
<div>
<ListComponent />
</div>
<AddItemComponent />
</div>
)
}
}
它有两个名为 ListComponent 和 AddItemComponent 的子组件。而且,我有一个商店有这个定义。
import { EventEmitter } from 'events';
class DataStore extends EventEmitter{
constructor()
{
super();
this.todos = [
"Eat",
"Sleep",
"Die",
"Shower"
];
}
getAll(){
return this.todos;
}
addItem(newItem)
{
this.todos.push(newItem);
this.emit("change")
}
}
const dataStore = new DataStore;
export default dataStore;
它具有向数组添加新项的功能和获取数组的功能。
这是显示来自 DataStore 通量存储的项目数组的 ListComponent。
import React from 'react';
import TodoItem from './TodoItem';
import DataStore from './data.store';
class ListComponent extends React.Component{
constructor(props)
{
super(props)
this.state = { todos : DataStore.getAll() };
}
componentWillMount(){
DataStore.on('change', () => {
//do somethif
this.state = { todos : DataStore.getAll() };
})
}
render()
{
var deleteItem = (item) => {
this.deleteItem(item);
}
var editItem = (item) => {
this.editItem(item);
}
var addItem = (newItem) => {
this.addItem(newItem);
}
var todos = this.state.todos.map((item, index) => {
return (
<TodoItem item={item} addItem={addItem.bind(this)} deleteItem={deleteItem} editItem={editItem} />
)
});
return (
<ul>
{todos}
</ul>
)
}
deleteItem(item)
{
this.setState({ todos: this.state.todos.filter((listItem, index) => {
return listItem !== item;
}) });
}
editItem(item)
{
alert(item)
}
addItem(newItem)
{
DataStore.addItem(newItem);
}
}
module.exports = ListComponent;
它正在更新 DataStore 存储的更改事件中的项目。但是我没有在 ListComponent 中调用 addItem 函数。我在 AddItemComponent 中调用它。 这是 AddItemComponent 的定义。
import React from 'react';
import DataStore from './data.store';
class AddItemComponent extends React.Component{
constructor(props)
{
super(props)
}
render()
{
return (
<form id="form-todo" onSubmit={this.addItem.bind(this)} action="post">
<input type='text' ref="newItem" />
<button>ADD</button>
</form>
);
}
addItem(e)
{
e.preventDefault();
DataStore.addItem(this.refs.newItem.value);
}
}
module.exports = AddItemComponent;
但是我在AddItemComponent中触发addItem函数时,ListComponent中DataStore的change事件没有被触发。那么,如何在同层级的两个组件之间同步Flux Store的变化事件呢?
我能想到的解决方案是在 TodoComponent(父组件)中使用 DataStore,并将数据和函数作为 props 发送给子组件。我认为,那样的话代码会变得有点乱。这是唯一的解决方案吗?
欢迎来到 React!我重新创建了您的示例,并且您的 "change" 事件在 ListComponent
中触发,但是要更新组件中的状态,您应该使用 this.setState(changes)
而不是 this.state = {changes}
。仅在构造函数中使用 this.state = {}
来设置初始状态。 setState
方法正确地流过 React 生命周期并导致组件使用新状态重新呈现。 React 的状态和生命周期钩子有官方指南 here.