美文网首页
useEventTarget

useEventTarget

作者: skoll | 来源:发表于2022-02-24 16:35 被阅读0次

简介

1 .封装创建的表单值,支持自定义值转换和重置
2 .不用自己写onChange函数,直接绑定到onChange上面就行
3 .注意要做结构,不然只能做一个值的操作

import React from 'react'
import {useEventTarget} from 'ahooks'
export default function Drag(props){
    let [inputValue,{reset:inputReset,onChange:onInputChange}]=useEventTarget({initialValue:props.name})

    let [selectValue,{reset:selectReset,onChange:selectChange}]=useEventTarget({initialValue:"1"})

    return (
        <div>
            <input onChange={onInputChange} value={inputValue}></input>
            {inputValue}
            <button onClick={inputReset}>重置</button>

            <select value={selectValue} onChange={selectChange}>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select> 
            <button onClick={selectReset}>重置</button>
        </div>
    )
}

相关文章

  • useEventTarget

    简介 1 .封装创建的表单值,支持自定义值转换和重置2 .不用自己写onChange函数,直接绑定到onChang...

网友评论

      本文标题:useEventTarget

      本文链接:https://www.haomeiwen.com/subject/dqvzlrtx.html