SHOW:
|
|
- or go back to the newest paste.
1 | class ItemEditor extends PureComponent { | |
2 | constructor(props) { | |
3 | super(props); | |
4 | var item = this.props.item || {}; | |
5 | - | itemId: '', |
5 | + | |
6 | - | itemName: '' |
6 | + | itemId: item.id || '', |
7 | itemName: item.name || '' | |
8 | } | |
9 | this.onSave = this.onSave.bind(this); | |
10 | this.onItemPropChange = this.onItemPropChange.bind(this); | |
11 | } | |
12 | ||
13 | createChangedItem() { | |
14 | return {id: this.state.itemId, name: this.state.itemName}; | |
15 | } | |
16 | ||
17 | onItemPropChange(propName, e) { | |
18 | let st = {}; | |
19 | st[propName] = e.target.value; | |
20 | this.setState(st); | |
21 | } | |
22 | ||
23 | onSave(e) { | |
24 | - | const item = Object.assign({}, this.props.item, this.createChangedItem()); |
24 | + | |
25 | const item = Object.assign({}, this.createChangedItem()); | |
26 | this.props.onSave(this.props.item, item); | |
27 | } | |
28 | } | |
29 | ||
30 | render() { | |
31 | return ( | |
32 | <div> | |
33 | <input type="text" value={this.state.itemId} onChange={(e) => this.onItemPropChange('itemId', e)}/> | |
34 | <input type="text" value={this.state.itemName} onChange={(e) => this.onItemPropChange('itemName', e)}/> | |
35 | <button onClick={this.onSave}>Save</button> | |
36 | </div> | |
37 | ); | |
38 | } | |
39 | } |