在onChange事件中未定义id

id undefined in onChange event

本文关键字：未定义 id 事件 onChange      更新时间：2023-11-06

使用react datepicker，我正在尝试获取点击的组件的id

<DatePicker
id={cellData.column}
selected={DatePickerDate}
onChange={this.onDateRangePickerChange}
className='form-control'
                    />

在我的点击处理程序中，传递的事件是一个即时日期对象，因此event.currentTarget是未定义的。

onDateRangePickerChange: function(event, picker){
        var localRowDataStack = _.cloneDeep(this.state.rowDataStack);
        localRowDataStack[event.currentTarget.id] = picker.startDate.format(appConfig.getKey('dateFormat'));
        this.setState({
            rowDataStack: localRowDataStack,
            isOmitReRender: false
        });
},

如何获取单击的日期选择器的id？

您可以使用.bind将id设置为onDateRangePickerChange的第一个参数，从而避免将id添加为DatePicker属性

onDateRangePickerChange: function (column, date) {
  console.log(column, date);
},
<DatePicker
  selected={ DatePickerDate }
  onChange={ this.onDateRangePickerChange.bind(this, cellData.column) }
  className="form-control"
/>;

您也可以扩展onDateRangePickerChange以接受id，并像这样将其传递到那里：

<DatePicker
    id={cellData.column}
    selected={DatePickerDate}
    onChange={(e, p) => this.onDateRangePickerChange(e, p, cellData.column)}
    className='form-control'/>

您可以尝试这样做：

onDateRangePickerChange: function(event){
        var id = event.target.id;  // ID from the element
        var localRowDataStack = _.cloneDeep(this.state.rowDataStack);
        localRowDataStack[id] = picker.startDate.format(appConfig.getKey('dateFormat'));
        this.setState({
            rowDataStack: localRowDataStack,
            isOmitReRender: false
        });
},

你可以在这里看到更多的例子/响应：React.js：用一个onChange处理程序识别不同的输入

相关文章：