CODEWITHSUNDEEP
reactjsdraftjsreact-draft-wysiwyg
Ashok
Ashok

Reputation: 59

How to Save and Cancel button in bottom of react-draft-wysiwyg?

I want to add some buttons like save and cancel . How to do that ? similar like teams where we can edit our comments on click of save and cancel? Add onBlur={this.updateComment.bind(this)} event to do save comments in editor but want to implement buttons like below

enter image description here For my editor.

<Editor
    editorState={editorState}
    wrapperClassName="demo-wrapper"
    onEditorStateChange={this.onEditorStateChange}
   onBlur={this.updateComment.bind(this)}
    }}
/>

Upvotes: 0

Views: 873

Answers (2)

NAKSHATRA NAHAR
NAKSHATRA NAHAR

Reputation: 19

add the trigger and buttons independently on them, move onBlur to the wrapper element (shared one) if you didn't get it then look at the code

<div onBlur={onSave}> 
      <Editor editorState={editorState} onEditorStateChange={onChange} />
        <div className="buttons">
          <span className="status">{saveState}</span>
          <button className="button" onClick={onCancel}>
            X
          </button>
          <button className="button" onClick={onSave}>
            V
          </button>
        </div>
    </div>

Upvotes: -1

Itamar
Itamar

Reputation: 1634

You need to add the buttons independently and trigger the events on them.

Then you need to move the onBlur to the shared wrapper element and it will work as expected.

In the below example you can see:

  • a wrapper div with save on blur
  • buttons wrapper next to the editor
  • each button triggers a change on the form state
    <div onBlur={onSave}> 
      <Editor editorState={editorState} onEditorStateChange={onChange} />
        <div className="buttons">
          <span className="status">{saveState}</span>
          <button className="button" onClick={onCancel}>
            X
          </button>
          <button className="button" onClick={onSave}>
            V
          </button>
        </div>
    </div>

Here is a codesandbox example: https://codesandbox.io/s/react-draft-wysiwyg-with-save-and-cancel-xoxr3f?file=/src/EditorWithButtons.jsx

Upvotes: 1

Related Questions