Реагировать на изменение значений выбранного элемента массива - PullRequest
Новая
       43

Реагировать на изменение значений выбранного элемента массива

0 голосов
/ 27 декабря 2018

В моем компоненте 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.

Как я могу заставить это работать?

...