前端一些细节总结

1. react中使用ref，来控制指定的元素的事件

• 需求是点击卡片之后弹起输入框，而不只是点击input

import React, {useRef} from 'react'
import style from './style.module.css'

interface IScrollCardSecond {
  nameFn: Function,
  name: string
}

const handleChange = (ev: any, nameFn: Function) => {
  const val = ev.target.value
  // 子组件中
  nameFn(val)
}

export default function ScrollCardSecond(props: IScrollCardSecond) {

  const {nameFn, name} = props
  const nameRef:any = useRef(null)

  return (
    // 这里要注意样式要写宽和高
    <div className={style['scroll-card-second']} 
      onClick={()=>nameRef.current.focus()}>
      <h3 className={style['title']}>我的签名</h3>
      <section className={style['signature']}>
        {/* 静心课堂 */}
        <input type="text" 
          placeholder={'点击签名'}
          style={{textAlign: "center"}}
          className={style['input']}
          ref={nameRef} 
          value={name}
          onChange={(ev: any) => handleChange(ev, nameFn)}
        />
      </section>
      <section className={style['one-px']}></section>
    </div>
  )
}

首先

const nameRef:any = useRef(null)

<input type="text" 
  placeholder={'点击签名'}
  style={{textAlign: "center"}}
  className={style['input']}
  ref={nameRef} 
  value={name}
  onChange={(ev: any) => handleChange(ev, nameFn)}
/>

然后

<div className={style['scroll-card-second']} 
  onClick={()=>nameRef.current.focus()}></div>

1. 父组件使用传函数来获取子组件的值

// 父组件中
<ScrollCardSecond nameFn={nameFn} name={name}></ScrollCardSecond>

手机移动端触屏版web网页禁止复制、选中文本的方法

div {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}

严重的问题

Boolean([]) //true