タグ付けされた質問 「reactjs」

axios POSTリクエストがコントローラーのURLにヒットしていますが、POJOクラスにnull値を設定しています。Chromeの開発者ツールを実行すると、ペイロードにデータが含まれています。何が悪いのですか？ Axios POSTリクエスト： var body = { userName: 'Fred', userEmail: 'Flintstone@gmail.com' } axios({ method: 'post', url: '/addUser', data: body }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); ブラウザの応答： ヘッダーを次のように設定した場合： headers:{ Content-Type:'multipart/form-data' } リクエストはエラーをスローします multipart / form-dataの投稿中にエラーが発生しました。Content-Typeヘッダーに境界がありません 私が郵便配達員で同じリクエストを出すと、それはうまくいき、私のPOJOクラスに値を設定します。 誰でも境界を設定する方法や、axiosを使用してフォームデータを送信する方法を説明できますか？

203 reactjs  react-redux  axios  ajaxform  axios-cookiejar-support 

私のrender関数には、次のような単純なフォームがあります。 render : function() { return ( <form> <input type="text" name="email" placeholder="Email" /> <input type="password" name="password" placeholder="Password" /> <button type="button" onClick={this.handleLogin}>Login</button> </form> ); }, handleLogin: function() { //How to access email and password here ? } handleLogin: function() { ... }アクセスEmailとPasswordフィールドには何を書けばよいですか？

199 javascript  html  reactjs  frontend 

反応ネイティブプロジェクトを実行すると、エラーno bundle URL presentが発生しますが、自分が何をしたのかわかりません。非常に混乱しました。

199 ios  reactjs  react-native 

私は反応するのが少し新しいです。私たちは始めるために二つのことをインポートする必要が参照、ReactおよびReactDOM缶誰でも違いを説明し、。私はReactのドキュメントを読んでいますが、何も言っていません。

197 reactjs  react-dom 

レデューサー自体でアクションをディスパッチすることは可能ですか？プログレスバーとオーディオ要素があります。目標は、オーディオ要素で時間が更新されたときにプログレスバーを更新することです。しかし、プログレスバーを更新するために、ontimeupdateイベントハンドラをどこに配置するか、またはontimeupdateのコールバックでアクションをディスパッチする方法がわかりません。これが私のコードです： //reducer const initialState = { audioElement: new AudioElement('test.mp3'), progress: 0.0 } initialState.audioElement.audio.ontimeupdate = () => { console.log('progress', initialState.audioElement.currentTime/initialState.audioElement.duration); //how to dispatch 'SET_PROGRESS_VALUE' now? }; const audio = (state=initialState, action) => { switch(action.type){ case 'SET_PROGRESS_VALUE': return Object.assign({}, state, {progress: action.progress}); default: return state; } } export default audio;

196 reactjs  redux  reducers 

Facebookのようなコンテンツフィードを処理するReactアプリコンポーネントで、エラーが発生しています。 Feed.js：94 undefined "parsererror" "SyntaxError：Unexpected token <in JSON in position 0 私はrender関数内のHTMLのタイプミスであることが判明した同様のエラーに遭遇しましたが、ここではそうではありません。 さらに紛らわしいことに、私はコードを以前の機能するバージョンにロールバックしましたが、それでもエラーが発生します。 Feed.js： import React from 'react'; var ThreadForm = React.createClass({ getInitialState: function () { return {author: '', text: '', included: '', victim: '' } }, handleAuthorChange: function (e) { this.setState({author: e.target.value}) }, handleTextChange: function (e) { this.setState({text: e.target.value}) …

196 javascript  jquery  json  reactjs 

私はフラックスアーキテクチャを備えたreact.jsアプリケーションを作成しており、サーバーからのデータ要求がいつどこで行われるべきかを把握しようとしています。この例はありますか？（TODOアプリではありません！）

194 javascript  reactjs  reactjs-flux 

Date反応中の小道具を検証するための現在好ましい方法は何ですか？ 今私は使っています： React.PropTypes.object ただし、これはforbid-prop-types lintルールに失敗しています。を使用するshape必要がありますか、それとももっと良い方法がありますか？

193 reactjs 

@connect反応コンポーネント内のストアにアクセスしようとすると、うまく機能します。しかし、他のコードでどのようにアクセスすればよいでしょうか。たとえば、アプリでグローバルに使用できるaxiosインスタンスを作成するために認証トークンを使用したいとしましょう。それを達成するための最良の方法は何でしょうか？ これは私の api.js // tooling modules import axios from 'axios' // configuration const api = axios.create() api.defaults.baseURL = 'http://localhost:5001/api/v1' api.defaults.headers.common['Authorization'] = 'AUTH_TOKEN' // need the token here api.defaults.headers.post['Content-Type'] = 'application/json' export default api 次に、ストアからデータポイントにアクセスしたいと思います。次のコマンドを使用して、reactコンポーネント内でデータポイントをフェッチしようとすると、このようになります。 @connect // connect to store @connect((store) => { return { auth: store.auth } }) export default …

192 reactjs  redux  react-redux 

反応コンポーネントの状態が変化すると、renderメソッドが呼び出されます。したがって、状態が変化した場合、レンダリングメソッドの本体でアクションを実行できます。次に、setStateコールバックの特定の使用例はありますか？

191 reactjs  callback  setstate 

ReactJSのコンポーネントの小道具としてデータオブジェクトを使用しています。 <Field data={data} /> PropTypesオブジェクト自体を検証するのは簡単です。 propTypes: { data: React.PropTypes.object } しかし、内部の値を検証したい場合はどうなりますか？すなわち。data.id、data.title？ props[propName]: React.PropTypes.number.required // etc...

191 reactjs 

renderReactコンポーネントのメソッド内でコメントを使用するにはどうすればよいですか？ 次のコンポーネントがあります。 'use strict'; var React = require('react'), Button = require('./button'), UnorderedList = require('./unordered-list'); class Dropdown extends React.Component{ constructor(props) { super(props); } handleClick() { alert('I am click here'); } render() { return ( <div className="dropdown"> // whenClicked is a property not an event, per se. <Button whenClicked={this.handleClick} className="btn-default" title={this.props.title} subTitleClassName="caret"></Button> …

191 reactjs  react-native 

Reactアプリケーションをモバイルデバイスでテストしようとしています。私はngrokを使用してローカルサーバーを他のデバイスで利用できるようにしており、他のさまざまなアプリケーションでこれを機能させています。しかし、ngrokをReact開発サーバーに接続しようとすると、エラーが発生します。 Invalid Host Header Reactはデフォルトで別のソースからのすべてのリクエストをブロックすると思います。何かご意見は？

191 reactjs  localhost  ngrok 

次のReactコンポーネントがあります。 export default class MyComponent extends React.Component { onSubmit(e) { e.preventDefault(); var title = this.title; console.log(title); } render(){ return ( ... <form className="form-horizontal"> ... <input type="text" className="form-control" ref={(c) => this.title = c} name="title" /> ... </form> ... <button type="button" onClick={this.onSubmit} className="btn">Save</button> ... ); } }; コンソールは私に与えていますundefined-このコードの何が問題になっていますか？

189 javascript  reactjs 

ことを知っているに来たv15.3.0反応し、我々は新しいベース・クラスと呼ばれる持ってPureComponentに拡張するPureRenderMixinビルトインを。私が理解しているのは、内部では小道具の浅い比較を採用しているということshouldComponentUpdateです。 これで、Reactコンポーネントを定義する3つの方法があります。 クラスを拡張しない機能的なステートレスコンポーネント PureComponentクラスを拡張するコンポーネント Componentクラスを拡張する通常のコンポーネント 昔、ステートレスコンポーネントをPure Components、またはDumb Componentsと呼んでいました。「純粋」という言葉の定義全体がReactで変更されたようです。 これら3つの基本的な違いは理解していますが、いつ何を選択するかはまだわかりません。また、それぞれのパフォーマンスへの影響とトレードオフは何ですか？ 更新： これらは私が明らかにすることを期待する質問です： 単純なコンポーネントを機能的（単純化するため）に定義するか、PureComponentクラスを拡張する（パフォーマンスのために）ように定義する必要がありますか？ 私が失ったシンプルさと実際のトレードオフで得られるパフォーマンスの向上はありますか？ Component常にPureComponentパフォーマンスを向上させるために使用できる場合、通常のクラスを拡張する必要がありますか？

188 javascript  reactjs  ecmascript-6