将 TextBox 值获取到 ToolTip 标题

Question

我是 front-end 的新手 technologies.i 需要将 TextBox 值输入 Tool-tip。在代码中 TextBox 的最大长度是 30.but 在 textBox 区域不适合字符 length.then 需要使用工具提示来决定并将鼠标悬停在部分显示的值上。

以下是我的代码

                   <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

在您的应用中使用 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
   })
}

Answer 2

您可以尝试以下方法：

创建一个有状态组件，其中输入值将保存在状态中。
更改值时，更新状态中的值。
现在您可以使用此状态属性来显示工具提示。

作为补充，您也可以尝试以下操作：

传递适合文本框的最大长度属性。
如果值超过，显示工具提示
否则不显示。

这将减少冗余信息。

示例如下：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>
  )
}

将 TextBox 值获取到 ToolTip 标题

Get TextBox value in to ToolTip title

html

javascript

textbox

tooltip

reactjs