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 | } |