20 - Handle a Checkbox in React

Author: codingforentrepreneurs

src/reactify-ui/src/posts/PostCreate.js

@@ -8,6 +8,7 @@ class PostCreate extends Component {
         super(props)
         this.handleSubmit = this.handleSubmit.bind(this)
         this.handleInputChange = this.handleInputChange.bind(this)
+        this.handleDraftChange = this.handleDraftChange.bind(this)
         this.clearForm = this.clearForm.bind(this)
         this.postTitleRef = React.createRef()
         this.postContentRef = React.createRef()
@@ -53,20 +54,12 @@ class PostCreate extends Component {
 
     handleSubmit(event){
         event.preventDefault()
-        // console.log(this.state)
         let data = this.state
-        if (data['draft'] === 'on'){
-            data['draft'] = true
-        } else {
-            data['draft'] = false
-        }
-        // console.log(data)
         this.createPost(data)
     }
 
     handleInputChange(event){
         event.preventDefault()
-        console.log(event.target.name, event.target.value)
         let key = event.target.name
         let value = event.target.value
         if (key === 'title'){
@@ -79,6 +72,12 @@ class PostCreate extends Component {
         })
     }
 
+    handleDraftChange(){
+      this.setState({
+        draft: !this.state.draft
+      })
+    }
+
     clearForm(event){
       if (event){
         event.preventDefault()
@@ -105,6 +104,7 @@ class PostCreate extends Component {
 
     render(){
         const {publish} = this.state
+        let thisComp = this
         return (
             <form onSubmit={this.handleSubmit} ref={(el) => this.postCreateForm = el}>
                 <div className='form-group'>
@@ -126,8 +126,9 @@ class PostCreate extends Component {
                 </div>
                 <div className='form-group'>
                     <label for='draft'>
-                    <input type='checkbox' id='draft' name='draft' className='mr-2' onChange={this.handleInputChange}/>
+                    <input type='checkbox' checked={this.state.draft} id='draft' name='draft' className='mr-2' onChange={this.handleDraftChange}/>
                      Draft </label>
+                     <button onClick={(event)=>{event.preventDefault();this.handleDraftChange()}}>Toggle Draft</button>
                 </div>
                 <div className='form-group'>
                     <label for='publish'>Publish Date</label>
@@ -140,7 +141,7 @@ class PostCreate extends Component {
                      value={publish}
                      required='required'/>
                 </div>
-                <button className='btn btn-primary'>Save</button>
+                <button type='submit' className='btn btn-primary'>Save</button>
                 <button className='btn btn-secondary' onClick={this.clearForm}>Cancel</button>
             </form>
         )