felvieira
10/14/2019 - 7:49 PM

React Dicas, infos Tips

//Qdo um componente pai dispara um evento do filho usar o e.stopPropagation();
newItem = (e, type) => {
    e.stopPropagation();
    this.props.action(type);
    this.subMenu();
};
  
<button
  style={{ backgroundColor: '#15ADF6' }}
  onClick={e => this.newItem(e, 'GenericNote')}
>

// Parent ter 2 filhos, um uma barra de busca e outro os card com o CRUD
// Ao excluir algo zerar a barra de busca
 
 componentWillReceiveProps(nextProps) {
   // Se a PROP atual tiver conteudo mas a atualizacao for vazia, quer dizer que
   // pode-se zerar o input que o cara fez alguma açao
    if (
      this.props.getCountMatchedItems.val &&
      nextProps.getCountMatchedItems.val === ''
    ) {
      this.refs.someName.value = '';
    }
  }

// Temos esse cara tambem, mas ele nao pega as props futuras so a atual e a passada
  componentDidUpdate(prevProps, prevState) {
    if (
       this.props.getCountMatchedItems.val !== prevProps.getCountMatchedItems.val
     ) {
       console.log('XXXXXXX');
     }
  }
  
  // NO INPUT REFERENCIAR "someName"
  
  <input
    type="text"
    ref="someName"
    name=""
    id=""
    defaultValue={getCountMatchedItems.val}
    onChange={e => this.handleInputChange(e)}
    placeholder="Procurar por senhas ..."
  />