多个复选框古登堡控制

时间:2019-05-21 作者:Alex Mangini

我正在尝试创建类似于WordPress类别列表的组复选框控件,但无法保存我的值。我不相信我走的是最好的方向,但似乎已经接近答案了。

enter image description here

我希望这些复选框值以数组的形式保存到单个属性,但我可以将选择保存为字符串(value1、value3、value4等)。

下面是edit() 方法,并从similar question here, 但无法保存我的选择:

attributes: {
    myCheckbox: {
        type: \'array\',
        default: []
    }
},
edit: function ( props ) {
    var checkboxes = [];
    var data = [
        {
            label: \'Checkbox 1\',
            value: \'checkbox1\'
        },
        {
            label: \'Checkbox 2\',
            value: \'checkbox2\'
        }
    ];
    $.each( data, function ( c, fields ) {
        checkboxes.push(
            el( CheckboxControl, {
                key: fields.value,
                label: fields.label,
                name: \'myCheckbox[]\',
                onChange: function( val ) {
                    props.setAttributes({ myCheckbox : myCheckbox[fields.value] });
                }
            })
        )
    });
    return [
        el(
            InspectorControls, {
                key: \'inspector\'
            },
            el(
                PanelBody, {
                    title: __( \'Settings\' )
                },
                checkboxes
            )
        ),
        el( ServerSideRender, {
            block: \'block/name\',
            attributes: props.attributes
        } )
    ]
},

1 个回复
SO网友:Vitauts Stočka

Use this code

$.each(data, function (c, fields) {
  checkboxes.push(
    el( CheckboxControl, {
      key: fields.value,
      label: fields.label,
      name: \'myCheckbox[]\',
      checked: props.attributes.myCheckbox.indexOf(fields.value) > -1,
      onChange: function( val ) {
        let data = props.attributes.myCheckbox;
        if (val) {
          if (data.indexOf(fields.value) === -1) {
            data.push(fields.value);
          }
        } else {
          data = props.attributes.myCheckbox.filter((v) => v !== fields.value);
        }
        props.setAttributes({ myCheckbox: data });
      }
    })
  )
})

相关推荐