为了账号安全,请及时绑定邮箱和手机立即绑定

将 TextBox 值获取到 ToolTip 标题

将 TextBox 值获取到 ToolTip 标题

DIEA 2023-12-25 16:54:22
我是前端技术的新手。我需要将 TextBox 值获取到工具提示中。在代码中 TextBox 最大长度为 30。但是在 textBox 区域中不适合该字符长度。然后需要决定使用 ToolTip 并将鼠标悬停在部分显示值。以下是我的代码                   <Tooltip title={########}>                    <input                      type="text"                      maxLength="30"                      name="displayName"                      placeholder=""                      onChange={displayNameChange.bind(this, f)}                      className="form-control input-display-name"                    />                    </Tooltip> 需要将该文本框值输入到 title={########} 中。感谢你的帮助。谢谢,
查看完整描述

2 回答

?
慕的地8271018

TA贡献1796条经验 获得超4个赞

您可以尝试以下方法:

  • 创建一个有状态组件,其中输入的值将保存在状态中。

  • 当值发生变化时,更新状态中的值。

  • 现在您可以使用此状态属性来显示工具提示。

作为附加组件,您也可以尝试以下操作:

  • 传递适合文本框的最大长度属性。

  • 如果值超过,则显示工具提示

  • 否则不显示。

这将减少冗余信息。

以下是示例:JSFiddle

const Tooltip = (props) => {

    const [ inputValue, setInputValue ] = useState('');


  function handleKeyup(event) {

    setInputValue( event.target.value );

  }


  return (

    <div title={ inputValue.length > props.visibleLen ? inputValue : null }>

      <input value={inputValue} onChange={ handleKeyup } />

    </div>

  )

}


查看完整回答
反对 回复 2023-12-25
?
四季花海

TA贡献1811条经验 获得超5个赞

在您的应用程序中使用state来实现此目的


constructor(props){

  super(props)

  this.state = {

     inputValue : ''

  }

}


<Tooltip title={this.state.inputValue}>

    <input

    type="text"

    maxLength="30"

    name="displayName"

    placeholder=""

    onChange={this.displayNameChange}

    className="form-control input-display-name"

    value={this.state.inputValue}

    />

</Tooltip> 

displayNameChange = (e) =>{

   this.setState({

      inputValue:e.target.value

   })

}


查看完整回答
反对 回复 2023-12-25
  • 2 回答
  • 0 关注
  • 124 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信