Question

我有一个输入表单，可以从api中检索菜单详细信息，用户可以根据菜肴的总价格变化选择数量。随之而来的是他可以选择Home_delivery或Pickup.After选择并点击接下来，必须将该数据发送到另一个页面以显示用户已选择进行确认的内容，并在此页面上用户输入其详细信息以继续下一步。

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

第1页

https://imagebin.ca/v/3FVPLAQDOLgV

第2页

https://imagebin.ca/v/3FVPiaEg3qJy

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>
)
}

Confirm_Order.js

    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>
        )
      }
    }

Routes.js

    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>
    );

如何将表单输入数据从一个组件发送到另一个组件中的反应js？

0 个答案: