Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'mode' из undefined - PullRequest
Новая
       55

Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'mode' из undefined

0 голосов
/ 21 сентября 2019

Я очень новичок в React / Gutenberg, поэтому прошу прощения за любые ошибки новичка.

Я создал свой собственный блок Gutenberg, где я переключаюсь между двумя состояниями (который работает), но как только ядобавьте this.state.mode к моему save: function(props){} Я получаю эту ошибку: Uncaught (in promise) TypeError: Cannot read property 'mode' of undefined Я искал все, что могу найти об этой ошибке, но 99% ответов касаются "связывания" функций и того, что я сделал.У кого-нибудь есть идеи, что тут не так?Спасибо! 

const el = wp.element.createElement;
    const {
      registerBlockType
    } = wp.blocks;
    const {
      __
    } = wp.i18n;
    const {
      RichText,
      InspectorControls
    } = wp.editor;
    const {
      Fragment,
      withAPIDate,
      Component
    } = wp.element;
    const {
      TextControl,
      CheckboxControl,
      RadioControl,
      SelectControl,
      TextareaControl,
      ToggleControl,
      RangeControl,
      Panel,
      PanelBody,
      PanelRow
    } = wp.components;
    const {
      withState
    } = wp.compose;

    class MyToggleControl extends Component {
      constructor(props, context) {
        super(props, context);
        this.toggleon = this.toggleon.bind(this);
        this.toggleoff = this.toggleoff.bind(this);
        this.state = {
          label: 'No-Togglemode',
          arrow: false,
          mode: "no-toggle",
          onChange: this.toggleon,

        };
      }

      toggleon() {
        this.setState({
          label: 'Togglemode',
          arrow: !this.state.arrow,
          mode: "toggle",
        });
      }

      toggleoff() {
        this.setState({
          label: 'No-Togglemode',
          arrow: !this.state.arrow,
          mode: "no-toggle",
        });
      }



         render() {
        if (this.state.mode === 'no-toggle') {
          return el(PanelRow, {},
            el(ToggleControl, {
              label: this.state.label,
              mode: "no-toggle",
              onChange: this.toggleon,
            }));

        }
        if (this.state.mode === 'toggle') {
          return el(PanelRow, {},
            el(ToggleControl, {
              label: this.state.label,
              mode: "toggle",
              onChange: this.toggleoff,
            }));

        }

      }
    }



    registerBlockType("timogede/icon-list", {
      title: __("Icon List"),
      icon: "lock",
      category: "common",
      attributes: {

        mode: {
          type: 'string',
        }

      },

      edit: function(props) {
        return el(Fragment, {},

          /*
           * INSPECTOR CONTROL AREA
           */

          el(InspectorControls, {},
            el(PanelBody, {
                title: 'Form Settings',
                initialOpen: true
              },

              /* Toggle Field */
              el(MyToggleControl, {}, ),

            ),

          ),

          /*
           * CONTENT AREA
           */

        );
      },


      save: function(props) {
        return el('div', {
            className: this.state.mode,
          },
       );
      }

    });
...