Изменить стиль поля ввода nativebase, когда оно сфокусировано - PullRequest
Новая
       8

Изменить стиль поля ввода nativebase, когда оно сфокусировано

0 голосов
/ 14 октября 2019

Я использую nativebase, который я добавил в свой проект и добавил собственную тему.

Теперь я хочу, чтобы все мои элементы textinput и элементы выбора использовали другой borderColor, когда они находятся на onFocus. Примерно так: 


 <Item regular 
  onFocus={() => {
   this.setState({ onFocus: true });
  }}
  style={onFocus? { color: theme.onFocusInput} : { color: theme.default}}
   <Input/>
</Item>

Однако это не работает, так как в компоненте <Item> нет свойства onFocus. Также я не хочу определять это на каждом экране, я использую элементы ввода. Это должно быть где-то определено в моих компонентах nativebase (proberly Item.js).

Я не уверен, могу ли я просто написать собственный компонент, который расширяет <Item>, и использовать его вместо этого, сохраняя при этом правильную тематику. Но это все равно не решило бы проблему, заключающуюся в том, что <Item> все еще не имеет свойства onFocus.

1 Ответ

0 голосов
/ 14 октября 2019

Попробуйте с 

<Item regular style={{ borderRadius: 10, marginBottom: 10 }}>
   <Input
        onFocus={() => {
        this.setState({ onFocus: true });
        }}
        onBlur={() => {
        this.setState({ onFocus: false});
        }}
        style={{ color: this.state.onFocus ? theme.onFocusInput : theme.default}}
    />
</Item>

, или вы можете просто create method, который устанавливает backgroundColor, когда input, если focus или blur, и использовать его в style. Как 

const focused = () => {
  this.setState({ backgroundcolor: "" })
}

const blured = () => {
 this.setState({ backgroundcolor: "" })
}

 <Item regular style={{ borderRadius: 10, marginBottom: 10 }}>
    <Input
       onFocus={this.focused}
       onBlur={this.blured}
       style={{ color: this.state.backgroundcolor }}
     />
 </Item>
...