Javascript 在工具提示标题中获取文本框值

我不熟悉前端技术。我需要在工具提示中输入文本框值。在代码中文本框最大长度为30。但在文本框区域中不适合该字符长度。然后需要决定使用工具提示并将鼠标悬停在部分显示值上

下面是我的代码

                   <Tooltip title={########}>
                    <input
                      type="text"
                      maxLength="30"
                      name="displayName"
                      placeholder=""
                      onChange={displayNameChange.bind(this, f)}
                      className="form-control input-display-name"
                    />
                    </Tooltip> 

需要将该文本框值输入到title={{}

谢谢你的帮助

---

谢谢，

在应用程序中使用

状态

来实现这一点

constructor(props){
  super(props)
  this.state = {
     inputValue : ''
  }
}

---

您可以尝试以下方法：

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

作为附加组件，您还可以尝试以下操作：

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

这将减少冗余信息

以下是一个示例：

const工具提示=（道具）=>{
常量[inputValue，setInputValue]=useState（“”）；
函数handleKeyup（事件）{
设置输入值（event.target.value）；
}
返回(
props.visibleLen？inputValue:null}>
)
}

您可以在keyup上更改状态值，然后在工具提示上使用它作为工具提示

<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
   })
}

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>
  )
}