Question

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

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个图标。正确的图标名称显示在每个选择控件中。但是，当我在选择控件中更改图标时，会添加一个新图标，而不是进行更新。添加网址时也是如此，同时添加了空白标签。

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

Answer 1

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

您的onChange应该找到正确的元素并进行相应的更新。例如，onChange的{{1}}看起来类似于以下内容。您也应该为另一个onChange实现类似的逻辑。

Social Network

ReactJS更新简单数组onChange输入

1 个答案: