Question

一些需要添加关闭按钮的工具提示。如果其他工具提示打开，我还需要任何其他工具提示来关闭。我怎样才能做到这一点？先谢谢了！我不知道从哪里开始。任何帮助或指导都会非常有帮助。这里的代码：

const ToolTip: FunctionComponent<ToolTipProps> = (props) => {
  const {onClick} = props

  return (
    <button className={'form__tooltip'} onClick={onClick}>
      <BsQuestion />
    </button>
  )
}

ToolTip.defaultProps = {}

type ToolTipProps = {onClick: () => void}

export default ToolTip

以及我需要按钮的带有提示的字段：

const FormField: FunctionComponent<FormFieldProps> = (props) => {
  const {
    label,
    type,
    required,
    placeholder,
    name,
    register,
    rules,
    disabled,
    className,
    tip,
    defaultValue,
  } = props

  const [error, setError] = useState<string>()
  const [showTip, setShowTip] = useState<boolean>(false)

  const form_field = (
    <div className={['form__field', className].join(' ')}>
      {label && <FormLabel text={label} forID={name} />}

      <input
        id={name}
        className={'form__input'}
        name={name}
        placeholder={placeholder as string}
        defaultValue={defaultValue}
        required={required}
        type={type}
        disabled={disabled}
        ref={register({
          ...rules,
        })}
      />
    </div>
  )

  return (
    <>
      <div className={'form__field_wrapper'}>
        {form_field}

        {tip && <ToolTip onClick={() => setShowTip(true)} />}
      </div>

      {showTip && <div className={'form__field_tip'}>{tip}</div>}
      {error && <div className={'form__error'}>Error</div>}
    </>
  )
}

FormField.defaultProps = {
  type: 'text',
  required: false,
  placeholder: '',
  disabled: false,
}

type FormFieldProps = {
  name: string,
  label?: string,
  type?: string,
  required?: boolean,
  placeholder?: string | number,
  rules?: Record<string, unknown>,
  register?: any,
  disabled?: boolean,
  className?: string,
  tip?: string,
  defaultValue?: string | number
}

export default FormField

Answer 1

您可以使用全局状态通过更改其状态值以唯一标识要显示的工具提示来跟踪活动工具提示。一个简单的工具顶部示例是

{(this.state.activeTooltip === 'Delete User') && <TooltipComponent contend={'Delete this user'}/>}

{(this.state.activeTooltip === 'Add User') && <TooltipComponent content={'Add new User'/>}

以上代码仅供参考，实际代码可能有所不同。

单击关闭工具提示按钮并在另一个打开 React 后关闭

1 个答案: