admin管理员组

文章数量:1418113

I am creating a block that will use Innerblocks to Dynamically add additional tabs depending on the number selected by the user. This number shall be passed through a Range Control.

Currently I have 

 class Test extends Component {
        constructor() {
            super()
            this.state = {
                count: attributes.tabNumber
            }
            this.addTab = this.addTab.bind(this)
            this.removeTab = this.removeTab.bind(this)
        }

        addTab() {
            this.setState(prevState => {
                const updatedCount = prevState.count + 1
                setAttributes({tabNumber: updatedCount})
                return {
                    count: updatedCount
                }
            })
        }

        removeTab() {
            this.setState(prevState => {
                const updatedCount = prevState.count - 1
                setAttributes({ tabNumber: updatedCount })
                return {
                    count: updatedCount
                }
            })
        }

        render() {
            let getTabbedContent = count => {
                let templates = [];
                for (let i = 0; i < count; i++) {
                    templates.push([
                        'cs/tab'
                    ]);
                }
                return templates;
            }

            return (
                <div>
                    <h1>{this.state.count}</h1>
                    <h2>{attributes.tabNumber}</h2>
                    <button onClick={this.addTab}>Add Tab</button>
                    <button onClick={this.removeTab}>Remove Tab</button>
                    <InnerBlocks
                        allowedBlocks={ALLOWED}
                        template={getTabbedContent(attributes.tabNumber)}
                        templateLock={true}
                    />
                </div>
            )
        }
    }

The desired effect shall be when the Range Control (Or in this current case the buttons) are pressed an Inner block of cs/tab is added or removed.

Not the worlds neatest of code but currently working on creating it before shrinking it. This has also been my first full dive into the Class system of React.

addTab() and removeTab() were added for testing purposes.

本文标签： block editorCreating a Dynamic InnerBlock that updates depending on state

版权声明：本文标题：block editor - Creating a Dynamic InnerBlock that updates depending on state 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745280822a2651415.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。