Получить значение TextBox в заголовке всплывающей подсказки

Question

Я новичок в интерфейсных технологиях. Мне нужно получить значение TextBox в коде Tool.Tip. Максимальная длина TextBox составляет 30. Но в области textBox не подходит под эту длину символов. и наведите курсор мыши на частично отображаемое значение.

мой код

                   <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

Вы можете попробовать следующий подход:

• Создать компонент с состоянием, в котором значение ввода будет удерживаться в состоянии.
• При изменении значения обновлять значение в состоянии.
• Теперь вы можете использовать это свойство состояния для отображения всплывающей подсказки.

В качестве дополнения вы также можете попробовать следующее:

• Передать максимальную длину свойство, которое помещается в текстовое поле.
• Если значение превышает, show tooltip
• Иначе не показывать.

Это уменьшит избыточную информацию.

Ниже приведен пример: 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
   })
}