我对如何在我的代码中使用@action 感到困惑。
class Items {
@observable items= [];
@action addItem() {
let newItem= new Item();
items.push(newItem);
}
}
@observer
class ItemPage extends Component {
constructor() {
super();
}
render() {
const {addItem} = this.props.store;
return (
<div className="items">
<input type="button" value="add" onClick={addItem}/>
</div>
)
}
}
const store = new Items();
最佳答案
确保您更改的是 this.items
而不仅仅是 items
。您还需要使用 action.bound
绑定(bind)操作或在组件中创建绑定(bind)处理程序:
class Items {
@observable items= [];
@action.bound
addItem() {
let newItem = new Item();
this.items.push(newItem);
}
}
@observer
class ItemPage extends Component {
render() {
const { addItem } = this.props.store;
return (
<div className="items">
<input type="button" value="add" onClick={addItem}/>
</div>
);
}
}
const store = new Items();
或者:
class Items {
@observable items= [];
@action
addItem() {
let newItem = new Item();
this.items.push(newItem);
}
}
@observer
class ItemPage extends Component {
handleClick = () => {
this.props.store.addItem();
};
render() {
return (
<div className="items">
<input type="button" value="add" onClick={this.handleClick}/>
</div>
);
}
}
const store = new Items();
关于javascript - 如何在 Mobx + reactjs 中使用@Action?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44059451/