React-tags: Aviso no componente de entrada

Criado em 18 set. 2018 · 7Comentários · Fonte: i-like-robots/react-tags

Estou recebendo um aviso usando ReactTags :

Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
    in input (created by Input)
    in div (created by Input)
    in Input (created by ReactTags)
    in div (created by ReactTags)
    in div (created by ReactTags)

Pelo que foi dito aqui , provavelmente deveríamos mudar https://github.com/i-like-robots/react-tags/blob/master/lib/Input.js#L78 por algo como:
defaultValue={query}

O que você acha?
Obrigado!

bug unconfirmed

Fonte

luciemac

👍13

Comentários muito úteis

Eu adicionei um PR para alterar para defaultValue, mas se você quiser um hack que evite o aviso até que isso seja corrigido, você pode adicionar um método noop à sua classe que usa ReactTags e referenciá-lo como onChange para seu componente. É feio, mas vai impedir os avisos.

noOp() {
    // does nothing
}

<ReactTags
tags={this.state.tags}
suggestions={this.state.suggestions}
handleAddition={this.handleTagAddition}
handleDelete={this.handleTagDelete}
inputAttributes={{ onChange: this.noOp }}
/>

chellman em 12 out. 2018

👍2

Todos 7 comentários

Estou tendo o mesmo problema, alguma sugestão?

gustavohornig em 2 out. 2018

Infelizmente, não tenho visto isso. Você poderia me informar qual versão do React você está usando?

i-like-robots em 5 out. 2018

Estou usando o React 16.3.2

luciemac em 5 out. 2018

@ i-like-robots Também estou tendo esse problema.

estherleah em 11 out. 2018

👍2

noOp() {
    // does nothing
}

<ReactTags
tags={this.state.tags}
suggestions={this.state.suggestions}
handleAddition={this.handleTagAddition}
handleDelete={this.handleTagDelete}
inputAttributes={{ onChange: this.noOp }}
/>

chellman em 12 out. 2018

👍2

Este é um assunto interessante, ele foi discutido longamente alguns anos atrás em https://github.com/facebook/react/issues/1118 (embora eu nunca tenha visto esse aviso, com qualquer versão do React incluindo 16.3.2! )

Não há nada tecnicamente _ errado_ com a implementação atual, mas concordo que os avisos que bagunçam o console são irritantes e devem ser evitados.

Não tenho certeza se definir defaultValue é a solução certa, pois pode ter consequências indesejadas (consulte https://github.com/i-like-robots/react-tags/pull/139#issuecomment-431006214 ), mas existem potencialmente várias outras soluções alternativas disponíveis.

i-like-robots em 18 out. 2018

Olhando mais um pouco, posso ver que este aviso tem 5 condições:

https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/shared/ReactControlledValuePropTypes.js#L32 -L46

É a primeira condição que me interessa porque por padrão esta _deve_ avaliar como true porque o valor padrão para state.query é uma string vazia. Portanto, isso deve fazer com que a função retorne mais cedo e não gere um aviso.

Portanto, para acionar esse aviso, tive que alterar o estado padrão (https://github.com/i-like-robots/react-tags/blob/master/lib/ReactTags.js#L35) para torná-lo um valor verdadeiro.

Algum de vocês que está experimentando tem um exemplo que demonstra o problema para que eu possa examiná-lo mais de perto?

i-like-robots em 18 out. 2018

Esta página foi útil?

0 / 5 - 0 avaliações