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을 변경할 수 있는지 확인합니다.

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

또는를 : 당신은 또한 action.bound와 함께 작업 중 하나를 결합 또는 구성 요소에 바인딩 된 핸들러를 작성해야

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