[PReact] Use Link State to Automatically Handle State Changes

最新推荐文章于 2025-09-05 14:41:09 发布

转载最新推荐文章于 2025-09-05 14:41:09 发布 · 49 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/7041559.html

文章标签：

#json

本文介绍如何在Preact中利用linkState库来简化组件的状态管理过程，不仅免去了方法绑定的需求，还提供了设置新状态值的便捷方式。通过一个文本输入框的例子展示了linkState的具体应用。

Storing and updating values inside a component’s local state (known as controlled components) is such a common pattern that Preact offers a really handy feature called ‘link state’ that not only removes the need to bind class methods, but also handles the setting of new values. This can remove the need for ‘setter’ style methods on classes and in this lesson we’ll look at an example of tracking the value of a ‘text input’.

Install:

yarn add linkstate

import {h, Component} from 'preact';
import linkState from 'linkstate';

export default class TextInput extends Component {
    render(props, {text = ''}) {
        return (
            <div>
                <input type="text" value={text} onInput={linkState(this, 'text')}/>
                <pre><code>{JSON.stringify(this.state, null, 2)}</code></pre>
            </div>
        )
    }
}

linkState will help to call 'this.state.setState', (this, 'text'), first 'this' is the context, in which context, you want to call setState, second 'text' is the prop name of the state.

转载于:https://www.cnblogs.com/Answer1215/p/7041559.html