如果屏幕有多个输入框，则为 inputBox 设置 onFocus 高度的最佳实践

Posted 2023-04-18

【中文标题】如果屏幕有多个输入框，则为 inputBox 设置 onFocus 高度的最佳实践

【英文标题】：Best practice to set onFocus height for a inputBox if the screen has multiple input box

【发布时间】：2020-02-21 15:59:58

【问题描述】：

我在屏幕上有很多输入框。这里我只需要为一个盒子设置 scrollHeight 。我在输入框上设置了 setState 值。 （另外，我已经将其他输入框的值设置为0）

实现这一目标的最佳做法是什么？

【参考方案1】：

您需要与 TextInputs 一样多的高度 - 状态中的一个高度不会解决问题。好的方法是将 TextInput 包装到您的自定义组件中，该组件将跟踪焦点状态并相应地更改高度，就像这样

class ResizingTextInput 
  constructor(props) 
    super(props)
    this.state = 
      focused: false
    
  

  render() 
    return (
      <TextInput
        ...props
        style=[props.style,  height: this.state.focused ? 50 : 10, borderColor: 'gray', borderWidth: 1 ]
        onFocus=() => this.setState( focused: true )
        onBlur=() => this.setState( focused: false )
      />
    )
  

然后使用<ResizingTextInput /> 而不是<TextInput />