Editing Label Colors
We could just use the state color.
// **** components/label-item.js ****
import React form 'react'
import ampersandMixin form 'ampersand-react-mixin'
export default React.createClass({
mixins: [ampersandMixin]
onDeletClick (event) { ... }
onEditClick () { ... },
onCancelClick () {
event.preventDefault()
this.props.label.editing = false
// ++++ 5. revert the editing
this.setState(this.getInitialState())
},
getInitialState () {
const {name, color} = this.props.label
return {
name: name,
color: color
}
},
onNameChange (event) {
this.setState({
name: event.target.value
})
},
// ++++ 4. create the handler
onColorChange (event) {
this.setState({
// cuts the first character (the #) - so the # will always stay in the input
// only saves the value after the #
color: event.target.value.slice(1)
})
}
render () {
const {label} = this.props
// ++++ 1. use the state color
const {color} = this.state
const cssColor = '#' + color
let content
if (label.editing) {
content = (
<form className='label'>
...
// ++++ 2. can use the component state color
<span style={{backgroundColor: cssColor}} className="..." />
<input name='name' type='text' value={this.state.name} onChange={this.onNameChange} />
// ++++ 3. add an onchange handler for the color picker
<input name='color' onChange={this.onColorChange} value={cssColor} />
</form>
)
} else {
content = (
<div className='label'>
...
</div>
)
}
return (<div>{content}</div>)
}
})