如果屏幕上有多个输入框，则为输入框设置onFocus高度的最佳做法

Question

我在屏幕上有很多输入框。在这里，我只需要为一个框设置scrollHeight。我将setState值设置为焦点在输入框上。 （此外，我将其他输入框的值设置为0）

实现此目的的最佳实践是什么？

Answer 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 />