[PReact] Use Link State to Automatically Handle State Changes
to use State Link handle changes
2023-09-14 09:00:51 时间
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.
相关文章
- [Web] Use Web Speech API to make the browser speak out loud using SpeechSynthesis
- [React Recoil] Use selectors to calculate derived data based on state stored within a Recoil atom
- [React Recoil] Use a Recoil atom to share state between two React components
- [Yarn] Use Yarn dlx to Execute Packages without Installing Them
- [Algorithms] Refactor a Loop in JavaScript to Use Recursion
- [React] Refactor a connected Redux component to use Unstated
- [Debug] Use Remote Sources to Debug a Web App on an Emulator, Simulator, or Physical Device
- [Angular] Learn How To Use ng-template Inputs
- [CSS] Use CSS Counters to Create Pure CSS Dynamic Lists
- [AngularJS] Use ng-model-options to limit $digest
- android:editable is deprecated: Use an <EditText> to make it editable
- [React] Use the React Context API to Globally Manage State
- [CSS] Use grid-template to make your CSS Grid declarations more readable
- [React Recoil] Use selectors to calculate derived data based on state stored within a Recoil atom
- [React Recoil] Use a Recoil atom to share state between two React components
- [Transducer] Step by Step to build a simple transducer
- [Angular] Angular Attribute Decorator - When to use it?
- [Poi] Use Markdown as React Components by Adding a Webpack Loader to Poi
- [React] Use React.cloneElement to Extend Functionality of Children Components
- [React] Use React Context to Manage Application State Through Routes
- [TypeScript] Use the never type to avoid code with dead ends using TypeScript
- Why SAP SQL view is not recommended to use in SQL ?
- ABAP connects to HANA
- How to use Chrome HAR save HTTP performance
- You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near
- 【编程实践】如何使用 SQL 函数 How To Use Functions in SQL
- Warning: (3719, “‘utf8’ is currently an alias for the character set UTF8MB3, which will be replaced by UTF8MB4 in a future release. Please consider using UTF8MB4 in order to be unambiguous.”)
- 【Tensorflow】解决Inputs to eager execution function cannot be Keras symbolic tensors, but found [<tf.Te