我是前端技術(shù)的新手。我需要將 TextBox 值獲取到工具提示中。在代碼中 TextBox 最大長(zhǎng)度為 30。但是在 textBox 區(qū)域中不適合該字符長(zhǎng)度。然后需要決定使用 ToolTip 并將鼠標(biāo)懸停在部分顯示值。以下是我的代碼 <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貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個(gè)贊
您可以嘗試以下方法：
創(chuàng)建一個(gè)有狀態(tài)組件，其中輸入的值將保存在狀態(tài)中。
當(dāng)值發(fā)生變化時(shí)，更新?tīng)顟B(tài)中的值。
現(xiàn)在您可以使用此狀態(tài)屬性來(lái)顯示工具提示。
作為附加組件，您也可以嘗試以下操作：
傳遞適合文本框的最大長(zhǎng)度屬性。
如果值超過(guò)，則顯示工具提示
否則不顯示。
這將減少冗余信息。
以下是示例：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貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超5個(gè)贊
在您的應(yīng)用程序中使用state來(lái)實(shí)現(xiàn)此目的
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 關(guān)注
- 185 瀏覽
添加回答
舉報(bào)
0/150
提交
取消