Рекомендуется устанавливать высоту 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 />