我是前端技術的新手。我需要將 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 關注
- 188 瀏覽
添加回答
舉報
0/150
提交
取消