1

我创建了一个选择控件，它有一个默认选项和许多不同的选项，这些选项应该允许我以多种不同的方式设置标题的样式。

我可以看到我的选择更改值（注意 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();

我创建了一个处理该值的函数，但是当我尝试在函数句柄大小“return MySelectControl.value”中返回值时，我的结果是未定义的，而不是 display-2 或任何其他选项。

我似乎无法获得我所缺少的价值。

4

2 回答 2

0 
function handleSize(){
   return MySelectControl.value;
}

您不想要 MySelectControl.size 而不是价值吗？或者可能类似于（我不确定是哪个）MySelectControl.props.size 或 MySelectControl.props.attributes.size。

console.log(MySelectControl) 可能会有所帮助

于 2019-04-24T09:23:11.070 回答
0

我设法通过这样做来解决这个问题： -

  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.attributes.size
于 2019-05-12T21:43:29.637 回答