Gutenberg：如何在编辑器中使用RangeControl并使其工作？

我尝试在块编辑器外部和内部使用RangeControl组件。但似乎缺少了一些样式，而且无法正常工作。

在古腾堡的街区有没有什么诀窍可以使用它？

export default function Edit( { attributes, setAttributes } ) {

const blockProps = useBlockProps();

const MyRangeControl = () => {
    const [ columns, setColumns ] = useState( 2 );
 
    return(
        <RangeControl
            label="Rating"
            value={ attributes.value }
            onChange={ onChangeValue }
            min={ 1 }
            max={ 10 }
            step={ 0.5 } 
        />
    );
};

return (
    <p { ...blockProps }>
    <MyRangeControl/>
    </p>
);

}

编辑：如果我这样添加它，它会工作，但它不会保存值：

export default function Edit( { attributes, setAttributes } ) {

    const blockProps = useBlockProps();

    const onChangeValue = ( newValue ) => {
        setAttributes( { value: newValue} )
    }


    return (
        <p { ...blockProps }>
        <RangeControl
                label="Rating"
                value={ attributes.value }
                onChange={ onChangeValue }
                min={ 1 }
                max={ 10 }
                step={ 0.5 } 
            />
        </p>
    );
}

const onChangeValue = ( newValue ) => { setAttributes( { value: String(newValue)} ) } <RangeControl label="Rating" value={ Number(attributes.value) } onChange={ onChangeValue } min={ 1 } max={ 10 } step={ 0.5 } />

相关推荐