Вопросы с тегом «reactjs»

В отличие от ListView, мы можем обновить this.state.datasource. Есть ли какой-либо метод или пример для обновления FlatList или повторного рендеринга? Моя цель - обновить текстовое значение, когда пользователь нажимает кнопку ... renderEntries({ item, index }) { return( <TouchableHighlight onPress={()=> this.setState({value: this.state.data[index].value+1})> <Text>{this.state.data[index].value}</Text> </TouchableHighlight> ) } <FlatList ref={(ref) => { this.list …

86 reactjs  react-native  react-native-flatlist 

В React состояние не обновляется мгновенно, поэтому мы можем использовать обратный вызов в setState(state, callback). Но как это сделать в Redux? После вызова this.props.dispatch(updateState(key, value))мне нужно немедленно что-то сделать с обновленным состоянием. Есть ли способ вызвать обратный вызов с последним состоянием, как то, что я делаю в React?

86 javascript  reactjs  redux 

Моя цель - динамически добавлять компоненты на страницу / родительский компонент. Я начал с такого базового шаблона: main.js: var App = require('./App.js'); var SampleComponent = require('./SampleComponent.js'); ReactDOM.render(<App/>, document.body); ReactDOM.render(<SampleComponent name="SomeName"/>, document.getElementById('myId')); App.js: var App = React.createClass({ render: function() { return ( <div> <h1>App main component! </h1> <div id="myId">myId div</div> </div> …

86 javascript  reactjs  babeljs 

Я работаю над реализацией фильтруемого списка с помощью React. Структура списка показана на изображении ниже. ПОМЕЩЕНИЕ Вот описание того, как это должно работать: Состояние находится в компоненте самого высокого уровня, Searchкомпоненте. Состояние описывается следующим образом: { видимый: логический, файлы: массив, фильтруется: массив, Строка запроса, currentSelectedIndex: целое число } files потенциально …

86 javascript  list  reactjs 

Я установил eslint& eslint-plugin-react. Когда я запускаю ESLint, линтер возвращает no-unused-varsошибки для каждого компонента React. Я предполагаю, что он не осознает, что я использую синтаксис JSX или React. Любые идеи? Пример: app.js import React, { Component } from 'react'; import Header from './header.js'; export default class App extends Component { …

86 javascript  reactjs  jsx  eslint 

У меня есть редуктор, и для расчета нового состояния мне нужны данные из действия, а также данные из части состояния, не управляемой этим редуктором. В частности, в редукторе, который я покажу ниже, мне нужен доступ к accountDetails.stateOfResidenceIdполю. initialState.js: export default { accountDetails: { stateOfResidenceId: '', accountType: '', accountNumber: '', product: …

86 javascript  reactjs  redux 

Я пробую React-Router (v4), и у меня возникают проблемы с запуском Nav, чтобы иметь один из Linkних active. Если я нажимаю на любой из Linkтегов, активный материал начинает работать. Однако я бы хотел, чтобы Home Linkбыл активен сразу после запуска приложения, поскольку это компонент, который загружается на /маршруте. Есть какой-либо …

86 javascript  reactjs  ecmascript-6  react-router 

Я попытался найти ответ на этот вопрос, но большинство из них находятся вне контекста React, где onChangeсрабатывает размытие. Выполняя различные тесты, я не могу сказать, чем отличаются эти два события (применительно к текстовой области). Может кто-нибудь пролить некоторый свет на это?

86 javascript  reactjs  dom-events 

Так что я начал изучать React неделю назад и неизбежно столкнулся с проблемой состояния и того, как компоненты должны взаимодействовать с остальной частью приложения. Я поискал, и мне кажется, что Redux - это аромат месяца. Я прочитал всю документацию и считаю, что это действительно революционная идея. Вот мои мысли по …

86 javascript  reactjs  state  immutability  redux 

У меня такой компонент: import React from 'react'; export default class AddItem extends React.Component { add() { this.props.onButtonClick(this.input.value); this.input.value = ''; } render() { return ( <div className="add-item"> <input type="text" className="add-item__input" ref={(input) => this.input = input} placeholder={this.props.placeholder} /> <button disabled={!this.input.value} className="add-item__button" onClick={this.add.bind(this)}>Add</button> </div> ); } } Я хочу, чтобы кнопка …

86 javascript  reactjs 

Я просто делаю простое приложение для изучения асинхронности с помощью redux. У меня все заработало, теперь я просто хочу отобразить фактическое состояние на веб-странице. Теперь, как мне получить доступ к состоянию магазина в методе рендеринга? Вот мой код (все на одной странице, потому что я только учусь): const initialState = …

86 javascript  asynchronous  reactjs  redux  react-redux 

Используя Facebook React. На странице настроек у меня есть textareaмногострочный текст, где пользователь может ввести многострочный текст (в моем случае адрес). <textarea value={address} /> Когда я пытаюсь отобразить адрес, например {address}, он не показывает разрывы строк и все находится в одной строке. <p>{address}</p> Есть идеи, как это решить?

86 javascript  reactjs  textarea 

Я пытаюсь настроить Google Analytics на своем сайте реагирования и натолкнулся на несколько пакетов, но ни один из них не имеет такой настройки, как у меня с точки зрения примеров. Надеялся, что кто-нибудь сможет пролить свет на это. Я смотрю на пакет response-ga . Мой метод рендеринга index.jsвыглядит так. React.render(( …

86 google-analytics  reactjs  react-router 

Я хочу привязать, чтобы закрыть всплывающее окно загрузки активного ответа при escapeнажатии. Вот код _handleEscKey:function(event){ console.log(event); if(event.keyCode == 27){ this.state.activePopover.hide(); } }, componentWillMount:function(){ BannerDataStore.addChangeListener(this._onchange); document.addEventListener("click", this._handleDocumentClick, false); document.addEventListener("keyPress", this._handleEscKey, false); }, componentWillUnmount: function() { BannerDataStore.removeChangeListener(this._onchange); document.removeEventListener("click", this._handleDocumentClick, false); document.removeEventListener("keyPress", this._handleEscKey, false); }, Но при нажатии любой клавиши в консоли ничего …

86 reactjs  react-jsx  react-bootstrap 

Я начинаю играть с приложением Create React, но не могу понять, как index.jsоно загружается внутри index.html. Это HTML-код: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <!-- Notice the use of %PUBLIC_URL% in the tag above. It will be replaced with the URL …

86 javascript  html  reactjs  create-react-app