将 TextBox 值获取到 ToolTip 标题

Question

我是前端技术的新手。我需要将 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={########} 中。

感谢你的帮助。

谢谢，

Answer 1

您可以尝试以下方法：创建一个有状态组件，其中输入的值将保存在状态中。当值发生变化时，更新状态中的值。现在您可以使用此状态属性来显示工具提示。作为附加组件，您也可以尝试以下操作：传递适合文本框的最大长度属性。如果值超过，则显示工具提示否则不显示。这将减少冗余信息。以下是示例：JSFiddleconst Tooltip = (props) => {&nbsp; &nbsp; const [ inputValue, setInputValue ] = useState('');&nbsp; function handleKeyup(event) {&nbsp; &nbsp; setInputValue( event.target.value );&nbsp; }&nbsp; return (&nbsp; &nbsp; <div title={ inputValue.length > props.visibleLen ? inputValue : null }>&nbsp; &nbsp; &nbsp; <input value={inputValue} onChange={ handleKeyup } />&nbsp; &nbsp; </div>&nbsp; )}

Answer 2

在您的应用程序中使用state来实现此目的constructor(props){&nbsp; super(props)&nbsp; this.state = {&nbsp; &nbsp; &nbsp;inputValue : ''&nbsp; }}<Tooltip title={this.state.inputValue}>&nbsp; &nbsp; <input&nbsp; &nbsp; type="text"&nbsp; &nbsp; maxLength="30"&nbsp; &nbsp; name="displayName"&nbsp; &nbsp; placeholder=""&nbsp; &nbsp; onChange={this.displayNameChange}&nbsp; &nbsp; className="form-control input-display-name"&nbsp; &nbsp; value={this.state.inputValue}&nbsp; &nbsp; /></Tooltip>&nbsp;displayNameChange = (e) =>{&nbsp; &nbsp;this.setState({&nbsp; &nbsp; &nbsp; inputValue:e.target.value&nbsp; &nbsp;})}