Javascript 如何在React js中正确使用ref？

我对react REF的工作原理感到困惑。 我的问题是，每当我更改输入选择值时，就会调用

update\u cart

函数

然后，我使用相关API调用操作来设置值

但是，当前，每当我更改该值时，整个组件都会刷新，并且refs值设置为未定义

我做错了什么

请注意，我只包含了相关代码

    /** @jsx React.DOM */
    'use strict'

    var React = require('react')
    var connect = require("react-redux").connect
    var moment = require('moment')
    var actions=require("../actions");
    var Calendar=require("./calendar");
    var utils=require("../utils");
    var CartChangeQty = require('./cart_change_qty')
    var Table = require('react-bootstrap').Table
    var Input = require('react-bootstrap').Input
    var Register = require('./register')
    var GroceryCheckout = React.createClass({
        getInitialState: function() {
            return {provinces: [], postal_codes: []};
        },

        render: function() {
            console.log("GroceryCheckout.render");
            var day_slots=[];
            if (this.props.grocery_cart) {
                var delivery_date=this.props.grocery_cart.delivery_date;
                if (!delivery_date) delivery_date=this.props.grocery_cart.delivery_slots[0][0];
                _.each(this.props.grocery_cart.delivery_slots,function(obj) {
                    if (obj[0]==delivery_date) {
                        day_slots=obj[1];
                    }
                }.bind(this));
                console.log("###### day_slots",day_slots);
            }
            return <div className="plr-grocery-checkout">
                <a className="plr-anchor" id="checkout"></a>
                <h2>Grocery Checkout</h2>
                {function() {
                    if (!this.props.grocery_cart) return <p>Your grocery cart is empty.</p>;
                    if (!this.props.user_data) {
                        return <div>
                            <p>
                                Is this your first time ordering? <input type="radio" name="first_time" ref="first_time_yes" onClick={this.onchange_first_time.bind(this,true)}/> Yes <input type="radio" name="first_time" ref="first_time_no" onClick={this.onchange_first_time.bind(this,false)}/> No
                            </p>
                            {function() {
                                if (this.state.first_time==true) {
                                    return <Register/>
                                } else if (this.state.first_time==false) {
                                    return ///something
                    } else {
                        return <div>
                            ///something
                             <div>
                            <h4><i className="glyphicon glyphicon-home"> </i> Delivery Address</h4>
                            <Input type="select" onChange={this.update_cart} ref="ship_address" style={{width:'auto',padding:'inherit',height:'auto'}}>
                                {this.props.user_data.contact_id.addresses.map(function(obj) {
                                    return <option key={obj.id} value={obj.id}>{obj.address}</option>
                                })}
                            </Input>

                            <h4><i className="glyphicon glyphicon-calendar "> </i> Please select your preferred delivery time slot:</h4>
                            <Calendar />

                                <div className="form-group">
                                    <label className="col-sm-2 control-label">Payment Method</label>
                                    <div className="col-sm-6">
                                        <Input type="select" onChange={this.update_cart} ref="pay_method" style={{width:'auto',padding:'inherit',height:'auto'}}>
                                            {this.props.grocery_cart.payment_methods.map(function(obj) {
                                                console.log("********************** payment method",obj.name)
                                                return <option key={obj.id} value={obj.id}>{obj.name}</option>
                                            }.bind(this))}
                                        </Input>
                                    </div>
                                </div>
                                <div className="form-group">
                                    <label className="col-sm-2 control-label">Payment Amount</label>
                                    <div className="col-sm-6">
                                        <p>{this.props.grocery_cart.amount_total} ฿</p>
                                    </div>
                                </div>
                            </div>
                            <hr/>
                            <h4><i className=" glyphicon glyphicon-list-alt"> </i>  Other Information</h4>
                            <div className="form-horizontal">
                                <div className="form-group">
                                    <label className="col-sm-2 control-label">Return Foam Box</label>
                                    <div className="col-sm-6">
                                        <input type="checkbox"  onChange={this.update_cart}/>
                                        <span style={{margin:10}}>For this delivery, would you like us to take back the foam box for recycling?</span>
                                    </div>
                                </div>
                            </div>
                            <div className="form-horizontal">
                                <div className="form-group">
                                    <label className="col-sm-2 control-label">No Call</label>
                                    <div className="col-sm-6">
                                        <input type="checkbox" onChange={this.update_cart}/>
                                        <span style={{margin:10}}>For this delivery, please do NOT call me one hour before delivery to re-confirm unless delayed</span>
                                    </div>
                                </div>
                            </div>
                            <button className="btn btn-lg btn-primary" onClick={this.send_order} disabled={this.props.grocery_cart.amount_total<1500?true:false}><span className="glyphicon glyphicon-ok"></span> Send Order</button>
                            {this.props.sending_grocery_order?<span><img src="/static/img/spinner.gif"/> Sending order...</span>:null}
                            {function() {
                                if (this.props.grocery_cart.amount_total>=1500) return;
                                return <span className="plr-warning" style={{marginLeft:"20px"}}>Min. order: 1500 ฿!</span>
                            }.bind(this)()}
                        </div>
                    }
                }.bind(this)()}
            </div>
        },

        onchange_first_time: function(value) {
            console.log("GroceryCheckout.onchange_first_time",value);
            this.setState({first_time: value});
        },

        update_cart: function() {
            console.log("GroceryCheckout.update_cart");
            console.log("this.refs.pay_method.value",this.refs.pay_method.value);
            var vals={
                customer_id: this.props.user_data.contact_id.id,
                ship_address_id: this.refs.ship_address.value||null,
                bill_address_id: this.refs.bill_address.value||null,
                pay_method_id: parseInt(this.refs.pay_method.value),
            };
            this.props.dispatch(actions.grocery_cart_update(vals));
        },



        onchange_qty: function(product_id,qty) {
            console.log("GroceryItem.onchange_qty",product_id,qty);
            this.props.dispatch(actions.grocery_cart_set_qty(product_id,qty));
        },


    })

    var select=function(state) {
        return {
            grocery_cart: state.grocery_cart,
            grocery_cart_loading: state.grocery_cart_loading,
            user_data: state.user_data,
            user_data_loading: state.user_data_loading,
            sending_grocery_order: state.sending_grocery_order,
        }
    }

    module.exports=connect(select)(GroceryCheckout);

/**@jsx React.DOM*/
“严格使用”
var React=require（'React'）
var connect=require（“react redux”）.connect
var力矩=要求（‘力矩’）
var actions=需要（“../actions”）；
var日历=要求（“/日历”）；
var utils=require（“../utils”）；
var CartChangeQty=需要（'./购物车变更数量'）
var Table=require（'react-bootstrap'）。表
var Input=require（'react-bootstrap'）。输入
变量寄存器=需要（'./寄存器'）
var GroceryCheckout=React.createClass({
getInitialState:函数（）{
返回{省份：[]，邮政编码：[]}；
},
render:function（）{
console.log（“GroceryCheckout.render”）；
var day_插槽=[]；
如果（这个.道具.购物车）{
var delivery_date=this.props.杂货店_cart.delivery_date；
如果（！delivery_date）delivery_date=this.props.groundry_cart.delivery_slots[0][0]；
_.each（此.道具.杂货车.配送槽，功能（obj）{
if（obj[0]==交货日期）{
day_slots=obj[1]；
}
}.约束（这个）；
console.log（“日时段”，日时段）；
}
回来
杂货店结账
{函数（）{
如果（！this.props.screery_cart）返回您的购物车是空的。
；
如果（！this.props.user_数据）{
回来

这是您第一次点菜吗？是不是

{函数（）{
if（this.state.first_time==true）{
回来
}else if（this.state.first_time==false）{
return///某物
}否则{
回来
///某物
送货地址
{this.props.user_data.contact_id.addresses.map（函数（obj））{
返回{obj.address}
})}
请选择您首选的交货时间段：
付款方式
{this.props.groundry\u cart.payment\u methods.map（函数（obj））{
console.log（“*************************支付方式”，对象名称）
返回{obj.name}
}.bind（this））}
付款金额
{这个.道具.购物车.总金额}


其他资料
返回泡沫盒
对于此次交付，您是否希望我们收回泡沫盒进行回收？
没有电话
对于此次发货，请不要在发货前一小时打电话给我重新确认，除非延迟
=1500）返回；
退货最低订单：1500฿！
}.bind（这个）（）
}
}.bind（这个）（）
},
onchange\u first\u时间：函数（值）{
log（“GroceryCheckout.onchange\u first\u time”，值）；
this.setState（{first_time:value}）；
},
更新购物车：函数（）{
console.log（“GroceryCheckout.update_cart”）；
log（“this.refs.pay\u method.value”，this.refs.pay\u method.value）；
var VAL={
客户id:this.props.user\u data.contact\u id.id，
ship_address_id:this.refs.ship_address.value | | null，
账单地址id:this.refs.bill\u address.value | | null，
pay_method_id:parseInt（this.refs.pay_method.value），
};
this.props.dispatch（actions.grounder\u cart\u update（vals））；
},
变更数量：功能（产品id、数量）{
控制台日志（“杂货店项目变更数量”，产品id，数量）；
此.props.dispatch（操作.杂货车设置数量（产品id，数量））；
},
})
var select=func
<Input type="select" onChange={this.update_cart} ref="ship_address" style={{width:'auto',padding:'inherit',height:'auto'}}>
   {this.props.user_data.contact_id.addresses.map(function(obj) {
       return <option key={obj.id} value={obj.id}>{obj.address}</option>
   })}
</Input>