我正在创建一个类似于WP核心表块的块，它首先向用户提供一个表单来设置行数和列数。我想在TextControl中为列数设置一个默认值。

以下是该块的高度简化版本：

const { registerBlockType } = wp.blocks; 
var el = wp.element.createElement;
const { TextControl } = wp.components;

registerBlockType( \'cgb/a11ytable\', {
    title: \'Accessible Table\',
    icon: \'screenoptions\',
    category: \'common\',
    attributes: {
        numCols: {
            type: \'number\'
        }
    },
    edit: (props) => {
        const { attributes: { numCols }, className, setAttributes } = props;
        return [
            el(
                TextControl, {
                    label: \'Number of Columns\',
                    type: \'number\',
////////////////////////////////////////////////////
                    value: 2, // this is the problem line
////////////////////////////////////////////////////
                    onChange: function(value) {
                        props.setAttributes({ numCols: value })
                    }
                }
            ),
        ];
    },
    save: ( props ) => {
        var attributes = props.attributes;
        return el(\'table\', { className: props.classes },
            attributes.numCols
        );
    },
} );

问题是，当TextControl的值设置为任何值时，如上所述（即使它从纯2更改为“2”），一旦在编辑器中添加了块，就不可能更改值。由于其类型：number而显示的上下箭头不允许更改数字，并且在输入中键入被禁用（您会得到一个光标，但无法选择、添加或删除2）。

古腾堡手册似乎没有检查语法来设置默认值。我认为它不需要状态，因为这个输入只是将数据发送到另一个函数，该函数创建表本身并将值保存到属性以供以后计算，用户不能继续操纵它。

registerBlockType( \'cgb/a11ytable\', {
    title: \'Accessible Table\',
    icon: \'screenoptions\',
    category: \'common\',
    attributes: {
        numCols: {
            type: \'number\',
            default: 2 // Added default value 
        }
    },
    edit: (props) => {
        const { attributes: { numCols }, className, setAttributes } = props;
        return [
            el(
                TextControl, {
                    label: \'Number of Columns\',
                    type: \'number\',
////////////////////////////////////////////////////
                    value: props.attributes.numCols, // this is the problem line
////////////////////////////////////////////////////
                    onChange: function(value) {
                        props.setAttributes({ numCols: value })
                    }
                }
            ),
        ];
    },
    save: ( props ) => {
        var attributes = props.attributes;
        return el(\'table\', { className: props.classes },
            attributes.numCols
        );
    },
} );