我是前端技术的新手。我需要将 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>
)
}
四季花海
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
})
}
- 2 回答
- 0 关注
- 64 浏览
添加回答
举报
0/150
提交
取消