将文本框值输入到工具提示标题中

Question

我是前端技术的新手。我需要将TextBox的值输入到Tool-tip中。代码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> 

需要使该textBox值进入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
   })
}