Question

我已为每个表行使用datepicker函数启动bootstrap。当我改变第一行是好的，但是对于第二行，第三行，对于n行，它改变了之前的所有行。

我的解决方法是将ID变量更改为＆＃34;＆＃34;使用BreakExeption - ＆gt; {}，但它不是解决方案。有人可以帮忙弄清楚如何解决这个问题吗？

请参阅以下代码：

    class DSRegisters extends Component {
        .....


        food_dateChanged(registerId, e) {
            var BreakException = {};

            $('.datepicker').each(function(){
                $(this).datepicker({
                    format: 'dd/mm/yyyy',
                    language: 'th-th',
                    todayBtn: "linked",
                    autoclose: true,
                }).on("change", function(e) {

                    console.log(e.target.value);
                    var value = e.target.value;
                    console.log(registerId);

                    if (value) {
                    const [bd, bm, by] = value.split("/");
                    value = new Date(by-543,bm-1,bd);
                    }
                    Meteor.call('registers.food_dateChanged', registerId, value, (error) => {
                        if (error) {
                            console.log(error.reason, 'danger');
                        } else {
                            console.log('success');
                            throw BreakException;

                        }
                    });
                    registerId="";
                });

            });

        }
.....

和render（）

                    <td>
                    <FormGroup>
                        <input
                            type="text"
                            className="form-control datepicker"
                            id="datepicker"
                            name="food_date"
                            ref={food_date => (this.food_date = food_date)}
                            defaultValue={food_date ?
                            (food_date.getDate()<10?'0':'')+food_date.getDate()+'/'+ (food_date.getMonth()<9?'0':'')+(food_date.getMonth()+1)+'/'+(food_date.getFullYear()+543)
                            :
                            food_date
                            }
                            onFocus={this.food_dateChanged.bind(this, _id)}

                        />

                    </FormGroup>
                    </td>

感谢两种解决方案，但我仍然面临着这个问题。当我更改每个输入时，下面是console.log（）。最后，所有输入都改为最后一次（07/10/2560）

更改时：

刷新后：

最新代码：

food_dateChanged(registerId, e) {
    $('.datepicking').datepicker({
            format: 'dd/mm/yyyy',
            language: 'th-th',
            todayBtn: "linked",
            autoclose: true,
            }).on("hide", (e) => {
                this.setState({ datePick: e.target.value });
                console.log(this.state.datePick);
                if (this.state.datePick) {
                    const [bd, bm, by] = this.state.datePick.split("/");
                    value = new Date(by-543,bm-1,bd);
                }
                Meteor.call('registers.food_dateChanged', registerId, value, (error) => {
                    if (error) {
                        console.log(error.reason, 'danger');
                    } else {
                        console.log('success');
                    }
                });
            });
}

Answer 1

您可能已初始化每个行项的setState，因此它将存储为“＆＃39;”。这是为了跟踪您所选择的内容。

Answer 2

我有解决方案。这是关于绑定。我有改变功能，在表达之后，我将它从变化中取消。请参阅以下代码了解我的解决方案：

food_dateChanged(e) {
     $('.datepicker').datepicker({
            format: 'dd/mm/yyyy',
            language: 'th-th',
            autoclose: true,
            todayBtn: "linked",
            forceParse: false
    }).on('change', function(e) {
            var value = e.target.value;
            console.log(value);
            console.log(e.target.id);
            console.log(e.target.name);

            // Process when value exist
            if (value) {
                const [bd, bm, by] = value.split("/");
                value = new Date(by-543,bm-1,bd);
            }

            Meteor.call('registers.food_dateChanged', e.target.name, value, (error) => {
                if (error) {
                    console.log(error.reason, 'danger');
                } else {
                    console.log('success');
                    $('.datepicker').unbind('change');
                }
            });
    });
}

如何防止datepicker帮我改变以前的行值？

2 个答案: