0

我有一个带有加号的图标按钮。每次单击它时，我都会创建一个文本输入。我简化了示例中的代码，但在我的项目中，我尝试使用它来创建社交图标，在每个文本输入中添加社交图标名称/或 url。代码是 React 中的 JSX：

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 */
    )
}

问题：正在创建相同的文本输入。有没有办法将索引或映射添加到 memoize/times 以呈现唯一输入？

4

1 回答 1

1

Lodash_.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>

所以在你的情况下，组件应该是这样的：

注意：我已经删除了 memoize，因为在渲染中多次调用它实际上并没有记住任何东西。如果你需要 memoize，你应该将函数创建移动到对象的属性中，这样调用就会被缓存。

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 ) }
        )
    }
}
于 2018-12-16T20:34:23.790 回答