Perguntas com a marcação «reactjs»

Em esta documentação de Reagir, diz-se que shallowCompare executa uma verificação de igualdade superficial nos objetos atuais props e nextProps, bem como no estado atual e nos objetos nextState. O que não consigo entender é se ele compara superficialmente os objetos, então o método shouldComponentUpdate sempre retornará verdadeiro, como Não …

91 javascript  reactjs 

Quero usar um evento keyDown em um div no React. Eu faço: componentWillMount() { document.addEventListener("keydown", this.onKeyPressed.bind(this)); } componentWillUnmount() { document.removeEventListener("keydown", this.onKeyPressed.bind(this)); } onKeyPressed(e) { console.log(e.keyCode); } render() { let player = this.props.boards.dungeons[this.props.boards.currentBoard].player; return ( <div className="player" style={{ position: "absolute" }} onKeyDown={this.onKeyPressed} // not working > <div className="light-circle"> <div className="image-wrapper"> <img …

91 reactjs  events  keypress  keydown 

Estou confuso sobre como acessar o <input>valor ao usar mount. Aqui está o que tenho como meu teste: it('cancels changes when user presses esc', done => { const wrapper = mount(<EditableText defaultValue="Hello" />); const input = wrapper.find('input'); console.log(input.render().attr('value')); input.simulate('focus'); done(); }); O console imprime undefined. Mas se eu modificar um …

91 unit-testing  reactjs  enzyme 

Qual é o padrão recomendado para fazer um setState em um pai a partir de um componente filho. var Todos = React.createClass({ getInitialState: function() { return { todos: [ "I am done", "I am not done" ] } }, render: function() { var todos = this.state.todos.map(function(todo) { return <div>{todo}</div>; }); …

91 reactjs 

Estou lutando para descobrir o problema com a seguinte sintaxe: export const sendVerificationEmail = async () => (dispatch) => { try { dispatch({ type: EMAIL_FETCHING, payload: true }); await Auth.sendEmailVerification(); dispatch({ type: EMAIL_FETCHING, payload: false })) } catch (error) { dispatch({ type: EMAIL_FETCHING, payload: false }); throw new Error(error); } …

91 javascript  reactjs  async-await  redux 

A entrada de texto é alinhada ao centro, como corrigir esta entrada de texto para que receba a entrada do canto superior esquerdo Aqui está meu css para entrada de texto /* The Text input is center aligned, how to fix this text input so that it takes input from …

91 javascript  ios  reactjs  react-native 

Eu estou tentando sair Reagir-Router (v4) e estou tendo problemas começam fora do Nav ter um dos Link's Seja active. Se eu clicar em qualquer uma das Linktags, o material ativo começa a funcionar. No entanto, gostaria que o Home Linkficasse ativo assim que o aplicativo iniciar, pois é o …

91 javascript  reactjs  ecmascript-6  react-router 

Tenho tido alguns problemas com o roteador react (estou usando a versão ^ 4.0.0). este é meu index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; import { Router, Route, Link, browserHistory } from 'react-router'; ReactDOM.render( <Router history={browserHistory} > <Route path="/" component={App} /> </Router>, …

91 javascript  json  reactjs  react-router 

Acho que o título diz tudo. O aviso amarelo é exibido sempre que eu desmonto um componente que ainda está em busca. Console Aviso: Não é possível chamar setState(ou forceUpdate) em um componente não montado. Este é um ambiente autônomo, mas ... Para corrigir, cancele todas as assinaturas e tarefas …

90 reactjs 

Estou procurando maneiras de implementar a rolagem infinita com React. Eu encontrei react-infinite-scroll e achei ineficiente, pois apenas adiciona nós ao DOM e não os remove. Existe alguma solução comprovada com React que irá adicionar, remover e manter um número constante de nós no DOM. Aqui está o problema jsfiddle …

90 javascript  html  infinite-scroll  reactjs 

Tenho um componente que às vezes precisa ser renderizado como um <anchor>e outras vezes como um <div>. O propque li para determinar isso, é this.props.url. Se existir, preciso renderizar o componente envolvido em um <a href={this.props.url}>. Caso contrário, ele apenas será renderizado como um <div/>. Possível? Isso é o que …

90 javascript  reactjs 

Quero fechar um menu suspenso quando ocorre um clique fora do componente suspenso. Como faço isso?

89 reactjs 

Digamos que eu tenha um botão simples: Quando clico no botão, o componente de cor muda entre vermelho e azul Eu poderia alcançar esse resultado fazendo algo assim. index.js Button: onClick={()=>{dispatch(changeColor())}} Color: this.props.color ? blue : red container.js connect(mapStateToProps)(indexPage) action_creator.js function changeColor(){ return {type: 'CHANGE_COLOR'} } reducer.js switch(){ case 'CHANGE_COLOR': …

89 javascript  reactjs  redux 

Estou reescrevendo meu aplicativo para usar o Flux e tenho um problema com a recuperação de dados do Stores. Tenho muitos componentes e eles se aninham muito. Alguns deles são grandes ( Article), alguns são pequenos e simples ( UserAvatar, UserLink). Tenho lutado para saber onde na hierarquia de componentes …

89 javascript  reactjs  reactjs-flux 

Estou essencialmente tentando fazer as guias reagirem, mas com alguns problemas. Aqui está o arquivo page.jsx <RadioGroup> <Button title="A" /> <Button title="B" /> </RadioGroup> Quando você clica no botão A, as necessidades de componentes RadioGroup para de-selecionar o botão B . "Selecionado" significa apenas um className de um estado ou …

89 reactjs