Forms 如何在react js中将表单输入数据从一个组件发送到另一个组件？_Forms_Reactjs_React Router

Forms 如何在react js中将表单输入数据从一个组件发送到另一个组件？

forms reactjs

Forms 如何在react js中将表单输入数据从一个组件发送到另一个组件？,forms,reactjs,react-router,Forms,Reactjs,React Router,我有一个输入表单，可以从api检索菜品详细信息，用户可以根据菜品更改的数量和总价选择数量。同时，他可以选择送货上门或取货上门。选择并单击“下一步”后，该数据必须发送到另一个页面，以显示用户选择确认的内容，在该页面上，用户输入他的详细信息，以继续下一步目前，我正在发送表单详细信息到第二页的网址，但如果我们改变的价值（例如：总价格从250到200），它显示在第二页200 第1页第2页 DishItem.js constructor() { super(); this.state = {

我有一个输入表单，可以从api检索菜品详细信息，用户可以根据菜品更改的数量和总价选择数量。同时，他可以选择送货上门或取货上门。选择并单击“下一步”后，该数据必须发送到另一个页面，以显示用户选择确认的内容，在该页面上，用户输入他的详细信息，以继续下一步

目前，我正在发送表单详细信息到第二页的网址，但如果我们改变的价值（例如：总价格从250到200），它显示在第二页200

第1页

第2页

DishItem.js

constructor() {
 super();
 this.state = {
   quantity: null,
   delivery: null,
   total_cost: null,
   time: null,
   dish_name: null
 }
}

componentWillMount() {
 this.setState({quantity: 1, dish_name : this.props.dish.name, time: this.props.dish.preparation_end_time,
    total_cost: this.props.dish.net_cost})
}

handleChangeInQuantity(value) {
 var total_cost = 0;
 total_cost = value * this.props.dish.net_cost;
 this.setState({quantity: value, total_cost: total_cost});
}

handleChangeInDeliveryMode(value) {
 this.setState({delivery: value});
}

saveAndContinue(e) {
 e.preventDefault();
 browserHistory.push('/confirm_order/'+ this.state.dish_name + '/' + this.state.quantity + '/' + this.state.total_cost + '/' + this.state.delivery);
}
render() {
 var date = new Date(this.props.dish.preparation_end_time);
 var hour = date.getHours();
 var minute = date.getMinutes();
 var period = hour >= 12 ? 'PM' : 'AM';
 return (
  <div>
   <h3>{this.props.dish.name}{this.props.dish.dish_content}</h3>
   Total- {this.state.total_cost}
   <Quantity change_in_quantity={this.handleChangeInQuantity.bind(this)} />
   <h4>Food Will be ready by <span className="glyphicon glyphicon-time"></span> <span>{hour}:{minute} {period}</span> Today<br/></h4>
   <Delivery change_in_delivery_mode=    {this.handleChangeInDeliveryMode.bind(this)} />
   {this.props.dish.hub_name}<br />
   <button className="btn btn-default" onClick= {this.saveAndContinue.bind(this)}>Next</button>
 </div>
)
}

    import React, { Component } from 'react';

    export default class Confirm_Order extends Component {
      constructor() {
        super();
        this.state = {
          name: '',
          phone: ''
        }
      }
      saveName(e) {
        this.setState({name: e.target.value})
      }
      savePhone(e) {
        this.setState({phone: e.target.value})
      }
      handleFormSubmission(e) {
        e.preventDefault();
        console.log(this.state);
      }
      render() {
        let dish = this.props.params;
        return (
          <div>
            <h2>{dish.dishname}</h2>
            <h4>{dish.quantity} Plates | Rs {dish.total_cost} | {dish.delivery} at </h4>
            <form onSubmit={this.handleFormSubmission.bind(this)}>
              <div>
                <label>Name</label>
                  <input type="text" value={this.state.name} onChange={this.saveName.bind(this)}/>
              </div>
              <div>
                <label>Phone</label>
                  <input type="text" value={this.state.phone} onChange={this.savePhone.bind(this)}/>
              </div>
              <button type="submit">Request OTP</button>
            </form>
          </div>
        )
      }
    }

    import React from 'react';
    import { Router, Route, IndexRoute} from 'react-router';
    import App from './App';
    import Home from './Components/Home';
    import NotFound from './Components/NotFound';
    import Confirm_Order from './Components/Confirm_Order';

    export default (props) => (
      <Router {...props}>
        <Route path="/" component={App} >
          <IndexRoute component={Home} />
          <Route path="/confirm_order/:dishname/:quantity/:total_cost/:delivery" component={Confirm_Order} />
          <Route path="*" component={NotFound} />
        </Route>
      </Router>
    );

constructor（）{
超级（）；
此.state={
数量：空，
交付：空，
总成本：空，
时间：空，
菜名：空
}
}
组件willmount（）{
this.setState（{quantity:1，dish_name:this.props.dish.name，time:this.props.dish.preparation_end_time，
总成本：this.props.dish.net\u cost}）
}
handleChangeInQuantity（值）{
var总成本=0；
总成本=价值*this.props.dish.net成本；
this.setState（{数量：值，总成本：总成本}）；
}
handleChangeInDeliveryMode（值）{
this.setState（{delivery:value}）；
}
保存并继续（e）{
e、 预防默认值（）；
browserHistory.push（'/confirm_order/'+this.state.dish_name+'/'+this.state.quantity+'/'+this.state.total_cost+'/'+this.state.delivery）；
}
render（）{
var date=新日期（此.props.dish.preparation\u end\u time）；
var hour=date.getHours（）；
var minute=date.getMinutes（）；
变量周期=小时>=12？'PM'：'AM'；
返回(
{this.props.dish.name}{this.props.dish.dish_content}
总计-{this.state.Total_cost}
食物将在今天{小时}：{分钟}{时段}前准备好

{this.props.dish.hub_name}

下一个
)
}

确认订单.js

constructor() {
 super();
 this.state = {
   quantity: null,
   delivery: null,
   total_cost: null,
   time: null,
   dish_name: null
 }
}

componentWillMount() {
 this.setState({quantity: 1, dish_name : this.props.dish.name, time: this.props.dish.preparation_end_time,
    total_cost: this.props.dish.net_cost})
}

handleChangeInQuantity(value) {
 var total_cost = 0;
 total_cost = value * this.props.dish.net_cost;
 this.setState({quantity: value, total_cost: total_cost});
}

handleChangeInDeliveryMode(value) {
 this.setState({delivery: value});
}

saveAndContinue(e) {
 e.preventDefault();
 browserHistory.push('/confirm_order/'+ this.state.dish_name + '/' + this.state.quantity + '/' + this.state.total_cost + '/' + this.state.delivery);
}
render() {
 var date = new Date(this.props.dish.preparation_end_time);
 var hour = date.getHours();
 var minute = date.getMinutes();
 var period = hour >= 12 ? 'PM' : 'AM';
 return (
  <div>
   <h3>{this.props.dish.name}{this.props.dish.dish_content}</h3>
   Total- {this.state.total_cost}
   <Quantity change_in_quantity={this.handleChangeInQuantity.bind(this)} />
   <h4>Food Will be ready by <span className="glyphicon glyphicon-time"></span> <span>{hour}:{minute} {period}</span> Today<br/></h4>
   <Delivery change_in_delivery_mode=    {this.handleChangeInDeliveryMode.bind(this)} />
   {this.props.dish.hub_name}<br />
   <button className="btn btn-default" onClick= {this.saveAndContinue.bind(this)}>Next</button>
 </div>
)
}

    import React, { Component } from 'react';

    export default class Confirm_Order extends Component {
      constructor() {
        super();
        this.state = {
          name: '',
          phone: ''
        }
      }
      saveName(e) {
        this.setState({name: e.target.value})
      }
      savePhone(e) {
        this.setState({phone: e.target.value})
      }
      handleFormSubmission(e) {
        e.preventDefault();
        console.log(this.state);
      }
      render() {
        let dish = this.props.params;
        return (
          <div>
            <h2>{dish.dishname}</h2>
            <h4>{dish.quantity} Plates | Rs {dish.total_cost} | {dish.delivery} at </h4>
            <form onSubmit={this.handleFormSubmission.bind(this)}>
              <div>
                <label>Name</label>
                  <input type="text" value={this.state.name} onChange={this.saveName.bind(this)}/>
              </div>
              <div>
                <label>Phone</label>
                  <input type="text" value={this.state.phone} onChange={this.savePhone.bind(this)}/>
              </div>
              <button type="submit">Request OTP</button>
            </form>
          </div>
        )
      }
    }

    import React from 'react';
    import { Router, Route, IndexRoute} from 'react-router';
    import App from './App';
    import Home from './Components/Home';
    import NotFound from './Components/NotFound';
    import Confirm_Order from './Components/Confirm_Order';

    export default (props) => (
      <Router {...props}>
        <Route path="/" component={App} >
          <IndexRoute component={Home} />
          <Route path="/confirm_order/:dishname/:quantity/:total_cost/:delivery" component={Confirm_Order} />
          <Route path="*" component={NotFound} />
        </Route>
      </Router>
    );

import React，{Component}来自'React'；
导出默认类确认\u订单扩展组件{
构造函数（）{
超级（）；
此.state={
名称：“”，
电话：''
}
}
保存名称（e）{
this.setState（{name:e.target.value}）
}
储蓄电话（e）{
this.setState（{phone:e.target.value}）
}
handleFormSubmission（e）{
e、 预防默认值（）；
console.log（this.state）；
}
render（）{
让dish=this.props.params；
返回(
{dish.dishname}
{盘。数量}盘{盘。总成本}{盘。交货}在
名称
电话
请求OTP
)
}
}

Routes.js

constructor() {
 super();
 this.state = {
   quantity: null,
   delivery: null,
   total_cost: null,
   time: null,
   dish_name: null
 }
}

componentWillMount() {
 this.setState({quantity: 1, dish_name : this.props.dish.name, time: this.props.dish.preparation_end_time,
    total_cost: this.props.dish.net_cost})
}

handleChangeInQuantity(value) {
 var total_cost = 0;
 total_cost = value * this.props.dish.net_cost;
 this.setState({quantity: value, total_cost: total_cost});
}

handleChangeInDeliveryMode(value) {
 this.setState({delivery: value});
}

saveAndContinue(e) {
 e.preventDefault();
 browserHistory.push('/confirm_order/'+ this.state.dish_name + '/' + this.state.quantity + '/' + this.state.total_cost + '/' + this.state.delivery);
}
render() {
 var date = new Date(this.props.dish.preparation_end_time);
 var hour = date.getHours();
 var minute = date.getMinutes();
 var period = hour >= 12 ? 'PM' : 'AM';
 return (
  <div>
   <h3>{this.props.dish.name}{this.props.dish.dish_content}</h3>
   Total- {this.state.total_cost}
   <Quantity change_in_quantity={this.handleChangeInQuantity.bind(this)} />
   <h4>Food Will be ready by <span className="glyphicon glyphicon-time"></span> <span>{hour}:{minute} {period}</span> Today<br/></h4>
   <Delivery change_in_delivery_mode=    {this.handleChangeInDeliveryMode.bind(this)} />
   {this.props.dish.hub_name}<br />
   <button className="btn btn-default" onClick= {this.saveAndContinue.bind(this)}>Next</button>
 </div>
)
}

    import React, { Component } from 'react';

    export default class Confirm_Order extends Component {
      constructor() {
        super();
        this.state = {
          name: '',
          phone: ''
        }
      }
      saveName(e) {
        this.setState({name: e.target.value})
      }
      savePhone(e) {
        this.setState({phone: e.target.value})
      }
      handleFormSubmission(e) {
        e.preventDefault();
        console.log(this.state);
      }
      render() {
        let dish = this.props.params;
        return (
          <div>
            <h2>{dish.dishname}</h2>
            <h4>{dish.quantity} Plates | Rs {dish.total_cost} | {dish.delivery} at </h4>
            <form onSubmit={this.handleFormSubmission.bind(this)}>
              <div>
                <label>Name</label>
                  <input type="text" value={this.state.name} onChange={this.saveName.bind(this)}/>
              </div>
              <div>
                <label>Phone</label>
                  <input type="text" value={this.state.phone} onChange={this.savePhone.bind(this)}/>
              </div>
              <button type="submit">Request OTP</button>
            </form>
          </div>
        )
      }
    }

    import React from 'react';
    import { Router, Route, IndexRoute} from 'react-router';
    import App from './App';
    import Home from './Components/Home';
    import NotFound from './Components/NotFound';
    import Confirm_Order from './Components/Confirm_Order';

    export default (props) => (
      <Router {...props}>
        <Route path="/" component={App} >
          <IndexRoute component={Home} />
          <Route path="/confirm_order/:dishname/:quantity/:total_cost/:delivery" component={Confirm_Order} />
          <Route path="*" component={NotFound} />
        </Route>
      </Router>
    );

从“React”导入React；
从“react Router”导入{Router，Route，IndexRoute}；
从“./App”导入应用程序；
从“./Components/Home”导入Home；
从“/Components/NotFound”导入NotFound；
从“./组件/确认订单”导入确认订单；
导出默认值（道具）=>(
);
<>代码>如果你看到你的应用程序不断增长，需要共享状态，你应该考虑使用一个状态管理库等等。RouDuxee，问这个问题的人使组件的通信顺利进行。@ USER1185197我不知道ReDux，开始学习一周后就可以反应了。这可以不用ReDux来完成吗？是的，当然研究flux架构，但请帮自己一个忙，并介绍redux，mobxok将研究它，但是我想到了另一种将表单详细信息从DISHITEM.JS发送到它的父家庭.js的方法，但是我想不出一种从HOM.JS发送到确认MyOrrord.jsif的方法。你看到你的应用程序不断增长，需要共享状态，你应该考虑使用状态管理库等等。问这个问题的人使组件之间的通信顺畅。@user1185197我不知道redux，一周前刚开始学习react。不使用redux能做到这一点吗？当然可以。查看flux架构，但请帮个忙，并向您介绍redux，mobxok将对此进行研究，但我想到了另一种方法将表单详细信息从DishItem.js发送到其父Home.js。但我无法找到一种方法将表单详细信息从Home.js发送到Home.js以确认订单