将 select 控件的值传递给函数
Passing value from select control to function
我创建了一个 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();
我创建了一个处理该值的函数,但是当我尝试 return 函数 handlesize 'return MySelectControl.value' 中的值时,我的结果是未定义的,而不是 display-2 或任何其他选项。
我似乎无法获得我所缺少的价值。
function handleSize(){
return MySelectControl.value;
}
你不想要MySelectControl.size而不是价值吗?或者可能是(我不确定是哪个)MySelectControl.props.size 或 MySelectControl.props.attributes.size.
这可能对 console.log(MySelectControl)
有帮助
我通过这样做设法解决了这个问题:-
- 在编辑功能中创建一个select控件。
{
<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 } ) }
/>
}
- 创建属性(尺寸)
- 更改select控件以更改大小属性
- 将道具传递给保存函数props.attributes.size
我创建了一个 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();
我创建了一个处理该值的函数,但是当我尝试 return 函数 handlesize 'return MySelectControl.value' 中的值时,我的结果是未定义的,而不是 display-2 或任何其他选项。
我似乎无法获得我所缺少的价值。
function handleSize(){
return MySelectControl.value;
}
你不想要MySelectControl.size而不是价值吗?或者可能是(我不确定是哪个)MySelectControl.props.size 或 MySelectControl.props.attributes.size.
这可能对 console.log(MySelectControl)
有帮助我通过这样做设法解决了这个问题:-
- 在编辑功能中创建一个select控件。
{
<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 } ) }
/>
}
- 创建属性(尺寸)
- 更改select控件以更改大小属性
- 将道具传递给保存函数props.attributes.size