Передача значения из элемента управления select в функцию

Я создал элемент управления select, который имеет параметр по умолчанию и несколько различных параметров, которые должны позволить мне стилизовать заголовок различными способами.

Я вижу изменяющееся значение моего выбора (обратите внимание на console.log), поэтому я знаю, что он работает нормально.

const MySelectControl = withState( {
   size: 'display-2',
} )( ( { size, setState } ) => (
   <SelectControl
   label="Size"
   value={ size }
   options={ [
       { label: 'Display 1', value: 'display-1' },
       { label: 'Display 2', value: 'display-2' },
       { label: 'Display 3', value: 'display-3' },
       { label: 'Display 4', value: 'display-4' },
   ] }
   onChange={ ( size ) => { setState( { size }, console.log(size + ' from func')  ) } }
   />
) );

// Block Options
const withInspectorControls =  createHigherOrderComponent( ( BlockEdit ) => {


   return (props) => {
       return (
           <Fragment>
           <BlockEdit { ...props } />
           <InspectorControls>
           <PanelBody
           title="Display Block Settings"
           initialOpen={ true }
           >

           <MySelectControl />

           </PanelBody>
           </InspectorControls>
           </Fragment>
       );
   };
}, "withInspectorControl" );

wp.hooks.addFilter( 'editor.BlockEdit', 'display-heading/with-inspector-controls', withInspectorControls );


function handleSize(){
   return MySelectControl.value;
}


const sizeH = handleSize();

Я создал функцию, которая обрабатывает значение, однако, когда я пытаюсь вернуть значение в функции handlesize 'return MySelectControl.value', мой результат не определен, а не display-2 или любой другой вариант.

Кажется, я не могу понять то, чего мне не хватает.


wordpress wordpress-gutenberg gutenberg-blocks
person Astrid    schedule 24.04.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward 

function handleSize(){
   return MySelectControl.value;
}

Вам не нужен MySelectControl.size, а не значение? Или, скорее всего, что-то вроде (я не уверен, что именно) MySelectControl.props.size или MySelectControl.props.attributes.size.

Может быть полезно console.log (MySelectControl)

person Simon    schedule 24.04.2019
comment
Как бы то ни было, display-2 должен быть размером по умолчанию, однако он должен передавать обратно любой параметр из элемента управления, а MySelectControl.props.size, MySelectControl.props.attributes.size оба возвращают undefined - person Astrid; 24.04.2019

arrow_upward
0
arrow_downward

Мне удалось решить это, выполнив следующее: -

  1. Создайте элемент управления выбора в функции редактирования.
{

  <SelectControl
      label="Size"
      value={ size }
      options={ [
          { label: 'Display 1', value: 'display-1' },
          { label: 'Display 2', value: 'display-2' },
          { label: 'Display 3', value: 'display-3' },
          { label: 'Display 4', value: 'display-4' },
      ] }
   onChange={ ( size ) => props.setAttributes( { size: size } ) }
      />

}
  1. Создайте атрибут (размер)
  2. Измените элемент управления выбора, чтобы изменить атрибут размера
  3. Передайте props в функцию сохранения props.attributes.size.
person Astrid    schedule 12.05.2019