如何在Mobx + reactjs中使用@Action？

Question

我很困惑如何在我的代码中使用@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(); 

Answer 1

请确保您改变this.items并不仅仅是items。您还需要无论是行动action.bound绑定或组件创建绑定处理程序：

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();