@tc-utils/hooks

安装

使用 npm:

$ npm i -g npm
$ npm i @tc-utils/hooks

使用方法

直接引用 import { useMergeState } from '@tc-utils/hooks'

Input组件

import { useMergeState } from '@tc-utils/hooks'
import React from 'react'

interface InputProps {
  defaultValue?: string
  value?: string
  onChange?: (newVal: string) => void
}
export const Input = (props: InputProps) => {
  const [value, onChange] = useMergeState('', {
    defaultValue: props.defaultValue,
    value: props.value,
    onChange: (val) => {
      console.log('🚀🚀 ~ App ~ val', val)
      props.onChange(`${val}`)
    },
  })

  return (
    <div>
      <input
        onChange={(e) => {
          onChange(e.target.value)
        }}
        value={value}
      />
      <span>组件内部合并值(value)：{value}</span>
    </div>
  )
}

父组件引用

import React, { useState } from 'react'
import { Input } from './Input'
import ReactDOM from 'react-dom'

const App = () => {
  const [state, setState] = useState<string>()

  return (
    <div>
      <div>useMergeState简单示例</div>
      <div>
        <Input
          onChange={(val) => {
            setState(val)
          }}
          defaultValue="demo"
          value={state}
        />
      </div>
      <div>外部值(state)：{state}</div>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))