将 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

您可以尝试以下方法：

• 创建一个有状态组件，其中输入的值将保存在状态中。

• 当值发生变化时，更新状态中的值。

• 现在您可以使用此状态属性来显示工具提示。

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

• 传递适合文本框的最大长度属性。

• 如果值超过，则显示工具提示

• 否则不显示。

这将减少冗余信息。

以下是示例：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>

  )

}

Answer 2

在您的应用程序中使用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

   })

}