switch xss option

src/client/js/components/Admin/MarkdownSetting/XssForm.jsx

@@ -17,7 +17,6 @@ class XssForm extends React.Component {
     super(props);
 
     this.onChangeEnableXss = this.onChangeEnableXss.bind(this);
-    this.onChangeXssOption = this.onChangeXssOption.bind(this);
     this.onChangeTagWhiteList = this.onChangeTagWhiteList.bind(this);
     this.onChangeAttrWhiteList = this.onChangeAttrWhiteList.bind(this);
     this.onClickSubmit = this.onClickSubmit.bind(this);
@@ -27,10 +26,6 @@ class XssForm extends React.Component {
     this.setState({ isEnabledXss: !this.state.isEnabledXss });
   }
 
-  onChangeXssOption(value) {
-    this.setState({ XssOption: value });
-  }
-
   onChangeTagWhiteList(value) {
     this.setState({ tagWhiteList: value });
   }
@@ -44,12 +39,12 @@ class XssForm extends React.Component {
   }
 
   xssOptions() {
-    const { t } = this.props;
+    const { t, markDownSettingContainer } = this.props;
 
     return (
       <fieldset className="form-group col-xs-12 my-3">
         <div className="col-xs-4 radio radio-primary">
-          <input type="radio" id="xssOption1" name="XssOption" onChange={() => { this.onChangeXssOption(1) }} />
+          <input type="radio" id="xssOption1" name="XssOption" onChange={() => { markDownSettingContainer.onChangeXssOption(1) }} />
           <label htmlFor="xssOption1">
             <p className="font-weight-bold">{ t('markdown_setting.Ignore all tags') }</p>
             <div className="m-t-15">
@@ -59,7 +54,7 @@ class XssForm extends React.Component {
         </div>
 
         <div className="col-xs-4 radio radio-primary">
-          <input type="radio" id="xssOption2" name="XssOption" onChange={() => { this.onChangeXssOption(2) }} />
+          <input type="radio" id="xssOption2" name="XssOption" onChange={() => { markDownSettingContainer.onChangeXssOption(2) }} />
           <label htmlFor="xssOption2">
             <p className="font-weight-bold">{ t('markdown_setting.Recommended setting') }</p>
             <WhiteListInput customizable={false} />
@@ -67,7 +62,7 @@ class XssForm extends React.Component {
         </div>
 
         <div className="col-xs-4 radio radio-primary">
-          <input type="radio" id="xssOption3" name="XssOption" onChange={() => { this.onChangeXssOption(3) }} />
+          <input type="radio" id="xssOption3" name="XssOption" onChange={() => { markDownSettingContainer.onChangeXssOption(3) }} />
           <label htmlFor="xssOption3">
             <p className="font-weight-bold">{ t('markdown_setting.Custom Whitelist') }</p>
             <WhiteListInput customizable onChangeTagWhiteList={this.onChangeTagWhiteList} onChangeAttrWhiteList={this.onChangeAttrWhiteList} />

src/client/js/services/MarkDownSettingContainer.js

@@ -25,6 +25,7 @@ export default class MarkDownSettingContainer extends Container {
       attrWhiteList: '',
     };
 
+    this.onChangeXssOption = this.onChangeXssOption.bind(this);
   }
 
   /**
@@ -34,4 +35,12 @@ export default class MarkDownSettingContainer extends Container {
     return 'MarkDownSettingContainer';
   }
 
+  /**
+   * switch xssOption
+   * @param {value} int
+   */
+  onChangeXssOption(value) {
+    this.setState({ XssOption: value });
+  }
+
 }