Função clear() do TextInput não funciona no iOs | React Native parte 2: Aprimorando app com navegação e mais recursos

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por GIOVANNI NICOLETTI

| 576.8k xp | 8 posts

Analista de Sistemas

A função clear() do TextInput não funciona no iOs, não apresenta erro, simplesmente não limpa o TextInput. No Android funciona normalmente. Alguém pode ajudar?

Segue código:

export default class App extends Component<Props> {

  limpaInput(){
    this.inputTeste.clear();
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          placeholder="Teste input"
          ref={input => this.inputTeste = input }
        />
        <Button
          title="Limpar"
          onPress={this.limpaInput.bind(this)}
        />
      </View>
    );
  }
}

2 respostas

por Rafael Rollo

| 496k xp | 755 posts

Alura Scuba Team Instrutor e Desenvolvedor

19/03/2018

Fala Giovanni, tudo bem ?

Testei por aqui e realmente temos um problema com o Native aí. Ainda não tinha percebido. Fiz algumas pesquisas, vi algumas issues (exemplo: https://github.com/facebook/react-native/issues/13251) no repositório do projeto no Github descrevendo o problema, e infelizmente nenhuma solução.

Testei os workarounds sugeridos nas discussões, mas não funcionaram. Essa Issue do exemplo inclusive foi fechada dizendo que talvez o problema tinha sido resolvido nos ultimos releases, mas logo a frente vem um comentário dando conta que o problema persiste. =(

Vou continuar dando uma olhada por aqui e se houver alguma forma de resolver o problema, volto a comentar.

Abraço!

solução!

por Gerson Luiz Furtado

| 83.5k xp | 8 posts

20/03/2018

Opa,

Também encontrei o mesmo problema. Por algum motivo ele ocorre apenas no iOS. Pesquisei na internet e acabei caindo no mesmo ponto citado pelo Rafael. Parece ser um problema sem solução.

De todo modo, o que fiz foi o seguinte:

Retirei o parâmetro ref do TextInput
Adicionei o parâmetro value ao TextInput
Alterei o valor do id no método que realiza a ação de adicionar o comentário (afim de evitar alertas de IDs repetidos caso o usuário digite 2x a mesma coisa)

addComent() {
    if (this.state.commentValue === '') {
      return;
    }

    const newList = [...this.state.item.comentarios, {
      id: this.state.item.comentarios+1,
      login: 'Gerson',
      texto: this.state.commentValue
    }];

    const updatedItem = {
      ...this.state.item,
      comentarios: newList
    }

    this.setState({item: updatedItem, commentValue: ''})
 }

render() {
    //...
    <TextInput style={styles.input}
        placeholder='Adicione um comentário...'
        underlineColorAndroid='transparent'
        value={this.state.commentValue}
        onChangeText={text => this.setState({commentValue: text})} />
    //...
}

Estou começando a trabalhar com o React Native. Caso esta não seja a solução ideal, sinta-se a vontade para aprimora-la. :)

Abraços!