我正在用打字稿编写一个React应用程序，试图同时处理右键单击和左键单击。
这是我的界面
<div class="container-fluid mt--7">
<div class="row">
<div class="col-xl-12">
{!! Form::open(['action' => ['InvoiceController@update', $invoice->id], 'method' => 'POST']) !!}
{{csrf_field()}}
<div class="card bg-secondary shadow">
<div class="card-header bg-white border-0">
<div class="row align-items-center">
<div class="col-8">
<h3 class="mb-0">Edit {{$invoice->number}} invoice </h3>
</div>
<div class="col-4 text-right">
{{ Form::submit('Save', ['class' => 'btn btn-sm btn-primary']) }}
{{ Form::hidden('_method', 'PUT') }}
</div>
</div>
</div>
<div class="card-body">
<div class="pl-lg-4">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label">Company</label>
<select class="form-control form-control-alternative" name="company_id" required>
<option value="{{$invoice->company_id}}" selected>{{ $invoice->company_name->Name }}</option>
@foreach($companys as $company)
<option value="{{$company->id}}">{{ $company->Name }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label">Payment</label>
<select class="form-control form-control-alternative" name="payment" required>
<option value="{{$invoice->payment}}" selected>{{$invoice->payment}}</option>
<option value="Pending">Pending</option>
<option value="Paid">Paid</option>
<option value="Canceled">Canceled</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label class="form-control-label">Invoices number</label>
<input class="form-control form-control-alternative" type="text" value="{{$invoice->number}}" disabled>
<input class="form-control form-control-alternative" name="number" placeholder="Auto generated" type="text" value="{{$invoice->number}}" hidden>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label">Date</label>
<input class="form-control form-control-alternative datepicker-here" name="date" data-language='en' placeholder="Select date" type="text" value="{{$invoice->date}}">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="form-control-label">Due date</label>
<input class="form-control form-control-alternative datepicker-here" name="due_date" data-language='en' placeholder="Select date" type="text" value="{{$invoice->due_date}}">
</div>
</div>
</div>
<hr class="my-4" />
<div class="row">
<div class="col-lg-12">
<table class="table table-bordered" id="dynamic_field">
<thead>
<tr>
<th scope="col">No.</th>
<th scope="col">Description</th>
<th scope="col">Qty</th>
<th scope="col">Price</th>
<th scope="col">Amount</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
@if(count($invoice_lists) > 0)
<?php $no = 1; ?>
@foreach( $invoice_lists as $invoice_list )
<tr>
<td>
{{ $no }}
<input type="text" name="list_id[]" value="{{ $invoice_list->id }}" hidden>
</td>
<td><input class="form-control form-control-alternative" type="text" name="description[]" value="{{$invoice_list->desc}}" placeholder="Description"></td>
<td><input class="form-control form-control-alternative qty" type="text" name="qty[]" value="{{$invoice_list->qty}}" placeholder="Qty"></td>
<td><input class="form-control form-control-alternative price" type="text" name="price[]" value="{{$invoice_list->price}}" placeholder="Price"></td>
<td><input class="form-control form-control-alternative amount" type="text" name="amount[]" value="{{$invoice_list->amount}}" placeholder="Amount"></td>
<td>
@if ($no == 1)
{!! Form::open(['action' => ['InvoiceController@remove', $invoice_list->id, $invoice->id], 'method' => 'POST']) !!}
{{ Form::hidden('_method', 'DELETE') }}
{{ Form::submit('Remove', ['class' => 'btn btn-danger btn-sm', 'disabled']) }}
{!! Form::close() !!}
@else
{!! Form::open(['action' => ['InvoiceController@remove', $invoice_list->id, $invoice->id], 'method' => 'POST']) !!}
{{ Form::hidden('_method', 'DELETE') }}
{{ Form::submit('Remove', ['class' => 'btn btn-danger btn-sm']) }}
{!! Form::close() !!}
@endif
</td>
<?php $no++; ?>
</tr>
@endforeach
@else
....
@endif
</tbody>
<thead>
<tr>
<th colspan="2"></th>
<th scope="col"><b>Sub Total</b></th>
<th scope="col"><b>VAT(21%)</b></th>
<th scope="col"><b>Grand Total</b></th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="2"></th>
<td scope="col">
<input class="form-control form-control-alternative sub" value="{{$invoice->sub}}" disabled>
<input class="form-control form-control-alternative subhidden" name="subhidden" value="{{$invoice->sub}}" hidden>
</td>
<td scope="col">
<input class="form-control form-control-alternative vat" value="{{$invoice->vat}}" disabled>
<input class="form-control form-control-alternative vathidden" name="vathidden" value="{{$invoice->vat}}" hidden>
</td>
<td scope="col">
<input class="form-control form-control-alternative grand" value="{{$invoice->grand}}" disabled>
<input class="form-control form-control-alternative grandhidden" name="grandhidden" value="{{$invoice->grand}}" hidden>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr class="my-4" />
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="form-control-label">Terms and Conditions</label>
<textarea class="form-control form-control-alternative" name="terms" rows="5" placeholder="Terms and Conditinios" required>{{$invoice->terms}}</textarea>
</div>
</div>
</div>
<input type="text" name="id" value="{{$invoice->id}}" hidden>
</div>
</div>
</div>
{!! Form::close() !!}
</div>
</div>
</div>
现在我已经声明了回调函数，如
interface ButtonProps {
value: CellValue;
state: CellState;
row: number;
col: number;
onClick(rowParam: number, colParam: number) : (e: React.MouseEvent) => void;
onContext(rowParam: number, colParam: number) : (e: React.MouseEvent) => void;
}
并最终将我的组件声明为
const handleContextMenu = (rowParam: number, cellParam: number) => (e: React.MouseEvent<HTMLDivElement, MouseEvent>) : void => {
e.preventDefault();
}
但是我得到一个错误
<Button
key={`${rowIndex}*${cellIndex}`}
value={cell.value}
state={cell.state}
onClick={handleCellClick}
onContext={handleContextMenu}
row={rowIndex}
col={cellIndex}
/>
我对打字稿不是很了解，但是据我说HTMLDivElement应该是HTMLElement类型，对吗？
答案 0 :(得分：2)
从 HTMLDivElement 更改为 Element 可解决您的问题。
// Before
const handleContextMenu = (...) => (e: React.MouseEvent<HTMLDivElement, MouseEvent>) : void => {
...
}
// After
const handleContextMenu = (...) => (e: React.MouseEvent<Element, MouseEvent>) : void => {
...
}
层次关系如下：
⌞元素
⌞HTMLElement
⌞HTMLDivElement
错误消息显示类似以下内容：
类型“元素”缺少类型“ HTMLDivElement”中的以下属性：align，accessKey，accessKeyLabel，autocapitalize和其他111个。 TS2322
这说明在Element中找不到某些属于HTMLDivElement的道具。