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

Как я могу заставить onKeyPressсобытие работать в ReactJS? Это должно предупредить, когда enter (keyCode=13)нажата. var Test = React.createClass({ add: function(event){ if(event.keyCode == 13){ alert('Adding....'); } }, render: function(){ return( <div> <input type="text" id="one" onKeyPress={this.add} /> </div> ); } }); React.render(<Test />, document.body);

215 javascript  reactjs  keypress  onkeypress 

React может отображать пользовательские атрибуты, как описано на http://facebook.github.io/react/docs/jsx-gotchas.html : Если вы хотите использовать пользовательский атрибут, вы должны поставить перед ним префикс data-. <div data-custom-attribute="foo" /> И это отличная новость, за исключением того, что я не могу найти способ получить к нему доступ из объекта события, например: render: function() { …

214 javascript  facebook  reactjs 

В React вы можете четко создать объект и назначить его как встроенный стиль. то есть. упомянуто ниже. var divStyle = { color: 'white', backgroundImage: 'url(' + imgUrl + ')', WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor prefix }; var divStyle2 …

214 reactjs 

У меня проблемы с работой с ReactJS на Facebook. Всякий раз, когда я делаю ajax и хочу отобразить HTML-данные, ReactJS отображает их в виде текста. (См. Рисунок ниже) Данные отображаются с помощью функции обратного вызова jjery Ajax. $.ajax({ url: url here, dataType: "json", success: function(data) { this.setState({ action: data.action }) …

213 javascript  jquery  ajax  reactjs 

Потратив некоторое время на изучение React, я понимаю разницу между двумя основными парадигмами создания компонентов. У меня вопрос, когда я должен использовать какой и почему? Каковы преимущества / компромиссы одного над другим? ES6 классы: import React, { Component } from 'react'; export class MyComponent extends Component { render() { return …

213 javascript  reactjs  ecmascript-6  redux 

Я пытаюсь отправить данные от дочернего компонента к его родителю следующим образом: const ParentComponent = React.createClass({ getInitialState() { return { language: '', }; }, handleLanguageCode: function(langValue) { this.setState({language: langValue}); }, render() { return ( <div className="col-sm-9" > <SelectLanguage onSelectLanguage={this.handleLanguage}/> </div> ); }); а вот дочерний компонент: export const SelectLanguage = …

213 reactjs 

Я передаю 2 значения дочернему компоненту: Список объектов для отображения удалить функцию. Я использую функцию .map () для отображения моего списка объектов (как в примере, приведенном на странице руководства по реагированию), но кнопка в этом компоненте вызывает onClickфункцию при рендеринге (она не должна срабатывать во время рендеринга). Мой код выглядит …

212 javascript  reactjs  button  onclick  dom-events 

Как центрировать текст в ReactNative как по горизонтали, так и по вертикали? У меня есть пример приложения в rnplay.org, где justifyContent = "center" и alignItems = "center" не работает: https://rnplay.org/apps/AoxNKQ Текст должен быть в центре. И почему между текстом (желтым) и родительским контейнером есть поле сверху? Код: 'use strict'; var …

212 reactjs  flexbox  react-native 

Есть кое-что, что я нахожу очень запутанным при работе React. Есть много примеров, доступных в Интернете, которые используют .jsфайлы с реакцией, но многие другие используют .jsxфайлы. Я читал о .jsxфайлах, и я понимаю, что они просто позволяют вам писать HTML-теги в вашем javascript. Но то же самое можно записать и …

212 reactjs  jsx 

Мой проект основан на создании-реагировать-приложение . npm startили yarn startпо умолчанию приложение будет запущено на порту 3000, и нет никакой возможности указать порт в файле package.json. Как я могу указать порт по своему выбору в этом случае? Я хочу запустить два проекта одновременно (для тестирования), один в порту, 3005а другой …

212 reactjs  npm 

UseEffect Реагировать крючок будет работать переданный в функции при каждом изменении. Это можно оптимизировать, чтобы он вызывался только при изменении желаемых свойств. Что делать, если я хочу вызвать функцию инициализации из componentDidMountи не вызывать ее снова при изменениях? Допустим, я хочу загрузить объект, но функция загрузки не нуждается в данных …

210 javascript  reactjs  react-hooks 

В настоящее время я работаю над платформами React JS и React Native . На полпути я наткнулся на Immutable или библиотеку Immutable-JS , когда читал о реализации Facebook в Flux и Redux. Вопрос в том, почему неизменность так важна? Что не так в мутирующих объектах? Разве это не упрощает ситуацию? …

206 javascript  reactjs  functional-programming  immutability  immutable.js 

В React, есть ли реальные различия между этими двумя реализациями? Некоторые друзья говорят мне, что FirstComponent - это шаблон, но я не понимаю, почему. SecondComponent кажется проще, потому что рендеринг вызывается только один раз. Первый: import React, { PropTypes } from 'react' class FirstComponent extends React.Component { state = { …

205 javascript  reactjs  components 

Я новичок в Bootstrap и застрял с этой проблемой. У меня есть поле ввода, и как только я ввожу только одну цифру, onChangeвызывается функция from , но я хочу, чтобы она вызывалась, когда я нажимаю «Enter», когда введено целое число. Та же проблема для функции проверки - она ​​вызывается слишком …

205 javascript  twitter-bootstrap  reactjs 

Как выбрать определенные бары в Reaction.js? Это мой код: var Progressbar = React.createClass({ getInitialState: function () { return { completed: this.props.completed }; }, addPrecent: function (value) { this.props.completed += value; this.setState({ completed: this.props.completed }); }, render: function () { var completed = this.props.completed; if (completed < 0) { completed = …

205 javascript  reactjs  getelementbyid