2 回答
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 关注
- 124 浏览
添加回答
举报