There is an Input component:

 import {h} from "preact"; const Input = ({children, ...rest}) => (<input {...rest}>{children}</input>); export default Input;

I do everything on Preact There is a device object that has the properties staIP, staMS, staGW

 onIPInput( par, event ) { } render({}) { const {device, linkState} = this.context; const {staIP, staMS, staGW} = device; return ( <div> <Input value={staIP} type="text" onChange={this.onIPInput.bind(this, "staIP")}/> <Input value={staMS} type="text" onChange={this.onIPInput.bind(this, "staMS")}/> <Input value={staGW} type="text" onChange={this.onIPInput.bind(this, "staGW")}/> </div> ); }

It is necessary that it was possible to enter only an IP address in the format xxx.xxx.xxx.xxx . If you put type = text , you can enter anything.

Help to add the onIPInput function.

    1 answer 1

    You have to check the status of the field inside the Input component and decide whether the new data is suitable for your description (you can write a regular schedule )
    For this, it is better to use the onChange() method onChange()

    • I updated the topic, help the function to write that something does not work ... - Oleg Perevyshin
    • and what should happen? You do nothing when the onChange function is called - nrjshka
    • The entered value should be checked and if all is well, then onInput = {linkState ("device.apGW")}, i.e. write this data to device.apGW (or maybe there is some other way to update the values). I in onChange () I transfer a key where to write. If the data is incorrect, then some hint. - Oleg Perevyshin
    • You can check on the fly, for example up to 3 digits, a value of 0..255, then the dot is automatically set. - Oleg Perevyshin