FORMでPOSTを実行する方法reactjsを使用して送信し、オブジェクト値をRESTサービスに渡しますか？

Question

私はreactjsを使用してログインページを作成しました。認証のためにPOSTメソッドの残りのAPI呼び出しを介してユーザー入力/パスワードを送信すると、エラーが発生します。誰かがここで間違って何が起こっているの私を助けることができます！

これは、ユーザー名とパスワードの文字列をjson形式で送信できないためです。

これは

<br /> 
<b>Notice</b>: Undefined variable: error in <b>/var/www/html/app/Controllers/Hafka/HAFKAController.php</b> on line <b>27</b><br /> 
<br /> 
<b>Notice</b>: Undefined variable: id in <b>/var/www/html/app/Controllers/Hafka/HAFKAController.php</b> on line <b>29</b><br /> 
<br /> 
<b>Notice</b>: Undefined variable: error in <b>/var/www/html/app/Controllers/Hafka/HAFKAController.php</b> on line <b>29</b><br /> 
{"code":"INVALID_JSON_INPUT","message":"Error decoding JSON input"} 

これは私のapp.jsファイルであり、

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 

export default class App extends Component { 

    render() { 
     return (
      <div className="App"> 
       <div className="App-header"></div> 
       <form 
        id="main-login" 
        action="http://don.healthedata.com/admin/login" 
        method="post"> 
        <h2> 
         Admin UI Login 
        </h2> 
        <label> 
         <span class="text">user:</span> 
         <input type="email" name="email"/><br/> 
        </label> 
        <br/> 
        <label> 
         <span class="text">password:</span> 
         <input type="password" name="password"/><br/> 
        </label><br/> 
        <div class="align-right"> 
         <button type="submit">Submit</button> 
        </div> 
       </form> 

      </div> 

     ); 
    } 

} 

が変更、エラーですApp.jsファイル：

import React, {Component} from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 

export default class App extends Component { 

    constructor(props, context) { 
     super(props, context); 

     this.state = { description: '' }; 
    } 

    onChange(e) { 
     this.setState({ 
      [e.target.name]: e.target.value 
     }); 
    } 

    onSubmit(e) { 
     e.preventDefault(); 

     fetch(this.props.formAction, { 
      headers: { 
       'Accept': 'application/json', 
       'Content-Type': 'application/json' 
      }, 
      body: JSON.stringify({description: this.state.description}) 
     }); 

     this.setState({description: ''}); 
    } 

    render() { 
     return (
      <div className="App"> 
       <form 
        id="main-login" 
        action={this.props.action} 
        method={this.props.method} 
        onSubmit={this.onSubmit}> 
        <h2>Admin UI Login</h2> 
        <label> 
         <span class="text">user:</span> 
         <input type="email" name="email"/><br/> 
        </label> 
        <br/> 
        <label> 
         <span class="text">password:</span> 
         <input type="password" name="password"/><br/> 
        </label> 
        <br/> 
        <div class="align-right"> 
         <button>Submit</button> 
        </div> 
       </form> 
      </div> 
     ); 
    } 

} 

// App.propTypes = { action: React.PropTypes.string.isRequired, method: React.PropTypes.string} 
App.defaultProps = { 
    action: 'http://don.healthedata.com/admin/login', 
    method: 'post' 
}; 

module.exports = App; 

は私がユーザに提供入力/パスワードとヒット提出、何も起こっていません。

Answer 1

そうだね、あなたはこのエラーを取得しています

{"code":"INVALID_JSON_INPUT","message":"Error decoding JSON input"}

それはあなたがJSON形式でデータを送信していないことを意味します。フォームから取得した情報を処理し、JSONオブジェクトを作成し、それをPOSTリクエストを通じて送信する必要があります。

これはフォームのonSubmitプロパティで行うことができます。新しい関数にフォームからのデータを処理し、その後、私はPOSTすべての

Answer 2

ファーストを送信するためにusing fetchを提案uはdata.Hereは、最初のファイルtodoadd.js作成挿入するURLフェッチ：

import fetch from 'isomorphic-fetch'; 

export function createBlogPost(data) { 
return fetch('Your Rest url', { 
    method: 'POST', 
    body: JSON.stringify(data), 
    headers: { 
     'Content-Type': 'application/json' 
    } 
}).then(response => { 
    if (response.status >= 200 && response.status < 300) { 
     return response; 
     console.log(response); 
     window.location.reload(); 
     } else { 
     console.log('Somthing happened wrong'); 
     } 
}).catch(err => err); 
} 

を

そのコントロールの後にあなたのUIはtododialouge.jsに提出：

import React, { Component, PropTypes } from 'react' 
import { connect } from 'react-redux' 
import { createBlogPost } from '../../actions/todoadd'; 
import { addTodo } from '../../actions/todo' 
import { setTodoDialogOpen, setErrorText } from '../../actions/todoDialog'; 
import Dialog from 'material-ui/Dialog'; 
import FlatButton from 'material-ui/FlatButton'; 
import RaisedButton from 'material-ui/RaisedButton'; 
import TextField from 'material-ui/TextField'; 


const initialstate = { 
title: '', 
desc: '', 
type: '', 
imageurl: '' 
} 

class TodoDialog extends Component { 
constructor(props) { 
    super(props) 
    this.state = initialstate; 
    this.onChange = this.onChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
}; 

onChange(e) { 
    if (e.target.id === 'title') { 
     this.setState({ title: e.target.value }); 
    } else if (e.target.id === 'desc') { 
     this.setState({ desc: e.target.value }); 
    } else if (e.target.id === 'type') { 
     this.setState({ type: e.target.value }); 
    } else if (e.target.id === 'image') { 
     this.setState({ imageurl: e.target.value}); 
     console.log(e.target.value); 
    } 
} 

handleSubmit() { 
    const text = { 
     news_title: this.state.title, 
     news_description: this.state.desc, 
     news_type: this.state.type, 
     news_src_url: this.state.imageurl, 
     operation:"insert" 
    } 
    alert(text.news_src_url); 
    createBlogPost(text); 
    setErrorText(undefined); 
    setTodoDialogOpen(false); 

}; 


render() { 
    const { messages, todoDialog, setTodoDialogOpen, addTodo, setErrorText } = this.props; 
    const styles = { 
     button: { 
      margin: 12, 
     }, 
     exampleImageInput: { 
      cursor: 'pointer', 
      position: 'absolute', 
      top: 0, 
      bottom: 0, 
      right: 0, 
      left: 0, 
      width: '100%', 
      opacity: 0, 
     }, 
    }; 

    function handleClose() { 
     setErrorText(undefined); 
     setTodoDialogOpen(false); 
    }; 

    const actions = [< FlatButton label={ 
     messages.cancel || 'cancel' 
    } 
     primary={ 
      true 
     } 
     onTouchTap={ 
      handleClose 
     } />, < FlatButton label={ 
      messages.submit || 'submit' 
     } 
      primary={ 
       true 
      } 
      onTouchTap={this.handleSubmit} /> 
    ]; 

    return (
     <div> 
      <Dialog title={messages.todo_add || 'todo_add'} actions={actions} modal={false} open={todoDialog.open} onRequestClose={handleClose}> 
       <form> 
        <TextField ref="todoText1" onChange={this.onChange} id='title' hintText={messages.todo_hint1 || 'todo_hint'} errorText={todoDialog.errorText} floatingLabelText={messages.todo_label1 || 'todo_label1'} fullWidth={true} /> 
        <TextField ref="todoText2" onChange={this.onChange} id='desc' hintText={messages.todo_hint2 || 'todo_hint'} errorText={todoDialog.errorText} floatingLabelText={messages.todo_label2 || 'todo_label2'} fullWidth={true} multiLine={true} rows={1} rowsMax={3} /> 
        <TextField ref="todoText3" onChange={this.onChange} id='type' hintText={messages.todo_hint3 || 'todo_hint'} errorText={todoDialog.errorText} floatingLabelText={messages.todo_label3 || 'todo_label3'} fullWidth={true} /> 
        <RaisedButton label='ADD Photo' style={styles.button} labelPosition="before" containerElement="label"><input type='file' onChange={this.onChange} id='image' style={styles.exampleImageInput} /></RaisedButton> 
       </form> 
      </Dialog> 
     </div> 
    ) 
} 
} 

uはあなたのrequirmentとして扱ういくつかの他のファイル。 私はこれがあなたに役立つことを願っています。