Memoize и Lodash Times получить индекс, создать уникальный текстовый ввод - PullRequest
Новая
       14

Memoize и Lodash Times получить индекс, создать уникальный текстовый ввод

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

У меня есть значок кнопки со знаком плюс.Каждый раз, когда я нажимаю на него, я создаю текстовый ввод.Я упростил код в этом примере, но в своем проекте я пытаюсь использовать его для создания социальных значков, в которых при каждом вводе текста вы добавляете имя / URL-адрес значка социальной сети.Код JSX в React: 

export default class Test extends Component {
    render() {  

        const { attributes: { totalItems, textInputValue }, setAttributes } = this.props;

        const createItem = memoize( ( totalItems ) => {
            return times( totalItems, () => renderItems( totalItems, textInputValue ) );
        } );

         return (
            <IconButton                 
              label={ __( 'Add text input' ) }
              icon="plus"
              onClick={ () => setAttributes( { totalItems: totalItems + 1 } ) }
            />

            { createItem( totalItems ) }
        )
    }
}

function renderItems( index, textInputValue  ) {
    return (

     <TextControl
        label={ __( 'My text input' ) }
        value={ textInputValue }
        onChange={ ( value ) => setAttributes( { textInputValue: value } ) }
     />  /* how can I get unique text inputs? */

     { index } /* this doesn't return the index of the element created */
    )
}

Проблема: создается тот же текстовый ввод.Есть ли способ добавить индекс или карту для запоминания / времени для отображения уникальных входных данных?

1 Ответ

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

Lodash's _.times() возвращает index для обратного вызова: 

const totalItems = 5;

const result = _.times(totalItems, index => ({ index }));

console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

Итак, в вашем случае компонент должен выглядеть примерно так:

Примечание: Я удалил памятку, так как при многократном вызове его в действительности ничего не запоминается.Если вам нужна памятка, вы должны переместить создание функции в свойство объекта, чтобы вызовы кэшировались. 

export default class Test extends Component {
    render() {  
        const { attributes: { totalItems, textInputValue }, setAttributes } = this.props;

        const createItem = (totalItems, textInputValue) =>
          times(totalItems, index => renderItems(index, textInputValue );

         return (
            <IconButton                 
              label={ __( 'Add text input' ) }
              icon="plus"
              onClick={ () => setAttributes( { totalItems: totalItems + 1 } ) }
            />

            { createItem( totalItems ) }
        )
    }
}
...