zoukankan      html  css  js  c++  java
  • [PReact] Use Link State to Automatically Handle State Changes

    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.

  • 相关阅读:
    Linux系统之-TCP-IP链路层
    TCP-IP协议简介
    一些概念
    Bolzano-Weierstrass 定理
    Newton 插值法
    用 Ipe 画图
    Codeforces #677D Vanya and Treasure
    Codeforces #990E Post Lamp
    hihoCoder #1763 道路摧毁
    hihoCoder #1758 加减
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7041559.html
Copyright © 2011-2022 走看看