0

我有以下带有社交图标的属性：

items: {
    type: 'array',
    default: [
      { icon: 'twitter', url: '#' },
      { icon: 'facebook-square', url: '#' },
      { icon: 'youtube', url: '#' },
    ],
 },

我有一些控制：

<InspectorControls>
    <PanelBody title={ __( 'Social Network Settings' ) } initialOpen={ true }>

    {items.map( ( item, index ) => (

        <Fragment>

          <SelectControl
            label="Social Network"
            value={ item.icon }
            options={ [
                { label: __( 'Twitter' ), value: 'twitter' },
                { label: __( 'Facebook' ), value: 'facebook-square' },
                { label: __( 'Instagram' ), value: 'instagram' },
                { label: __( 'YouTube' ), value: 'youtube' },
            ] }
            onChange={ ( value ) => setAttributes( { items: [ ...items, { icon: value } ] } ) }
          />

          <TextControl
            label={ __( 'Social Link' ) }
            value={ item.url }
            onChange={ ( value ) => setAttributes( { items: [ ...items, { url: value } ] } ) }
           />

        </Fragment>

    ) ) }

    </PanelBody>
</InspectorControls>

我正在渲染社交图标：

{items.map( ( item, index ) => (
  <a key={ index }
     href={ item.url || '#' }
     target="_blank"
  >
    <FontAwesomeIcon icon={['fab', item.icon]} />
  </a>
) ) }

显示 3 个图标。每个选择控件中都会显示正确的图标名称。但是，当我更改选择控件中的图标时，会添加一个新图标，而不是更新。添加 URL 时也是如此，正在添加空白标签。

更改选择和文本输入时如何更新数组？

4

1 回答 1

1

上面的onChange逻辑意味着每次更新都会添加一个新项目。

您onChange应该找到正确的元素并相应地更新它。例如，onChangeforSocial Network看起来类似于下面的内容。您也应该为其他 onChange 实现类似的逻辑。

onChange={( value ) => {
  const newItem = {...item, icon: value };
  const newItems = [...items];
  newItems[index] = newItem;
  setAttributes({ items: newItems });
}}
于 2018-12-17T11:53:30.267 回答