0

在我的 React 组件中，我有一个数组，它将呈现链接的社交图标：

icons: { [
     { iconName: 'twitter', url: '#'},
     { iconName: 'facebook', url: '#'},
     { iconName: 'instagram', url: '#'},
] },

在渲染中，我显示了数组中的所有社交图标链接：

icons.map( ( icon, index ) => (
  <a key={ index }
    href='#'
    onClick={() => {
       setAttributes({ iconClicked: index });
    }}
  >                   
        <Icon icon={ icon.iconName } /> /* this just renders an svg icon */
  </a>
) )

当我单击社交图标时，我希望能够使用图标名称和 url 填充表单并能够更改值。

为此，我首先设置itemClicked为我单击的图标的索引（使用onClick如上所示）。

注意： itemClicked以及icons数组是状态变量，它们会随着变化而更新。

接下来，我尝试在选择列表中显示图标名称，并在文本输入中显示 url：

<SelectControl
  label="Icon Name"
  value={ icons[iconClicked].iconName }
  options={ [
      { label: __( 'Twitter' ), value: 'twitter' },
      { label: __( 'Facebook' ), value: 'facebook' },
      { label: __( 'Instagram' ), value: 'instagram' },
      { label: __( 'YouTube' ), value: 'youtube' },
  ] }
  onChange={( value ) => {
     const newIcon = icons[iconClicked].iconName;
     setAttributes({ newIcon: value });
  }}
/>

<TextControl
  label={ __( 'Enter URL' ) }
  value={ icons[iconClicked].url }
  onChange={( value ) => {
     const newUrl = icons[iconClicked].url;
     setAttributes({ newUrl: value });
  }}
/>

当我单击任何图标时，选择和文本控件会填充正确的值，但是当我尝试更改值时它们不会更新。onChange我没有收到错误，但触发时初始值不会改变。

我怎样才能使这项工作？

4

0 回答 0