Some details of the front-end summary

1. react in use ref, to control the elements specified events

• Demand is 点击卡片after the input box pops up, not just clickinput

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>
  )
}

First of all

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)}
/>

then

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

1. Parent components using transfer function to obtain the value of subassembly

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

End mobile phone touch screen version of the web page is prohibited to copy, select the text method

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

serious problem

Boolean([]) //true