Question

使用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
        });

},

如何获取点击的datepicker的ID？

Answer 1

您也可以将onDateRangePickerChange扩展为接受id并将其放在那里：

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

Answer 2

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

onDateRangePickerChange: function (column, date) {
  console.log(column, date);
},

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

Answer 3

您可以尝试这样做：

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: Identifying different inputs with one onChange handler

id在onChange事件中未定义

3 个答案: