javascript - Thuộc tính 'selectionStart' không tồn tại trên kiểu 'EventTarget'

Tôi đang sử dụng selectionStart và selectionEnd để lấy điểm bắt đầu và kết thúc của một phần văn bản được chọn.

Mã: https://codesandbox.io/s/busy-gareth-mr04o

Tuy nhiên, tôi đang gặp khó khăn trong việc xác định loại sự kiện mà họ có thể được gọi. Nếu tôi sử dụng any, mã hoạt động đúng, nhưng tôi muốn biết sự kiện chính xác.

Tôi đã thử với các loại này: Element React.SyntheticEvent<HTMLDivElement> <HTMLDivElement> nhưng không thành công

export default function App() {
  const [startText, setStartText] = useState<number | undefined>();
  const [endText, setEndText] = useState<number | undefined>();

  const handleOnSelect = (event: any) => { <--- I CANNOT FIND THE RIGHT EVENT TYPE
    setStartText(event.target.selectionStart);
    setEndText(event.target.selectionEnd);
  };

  return (
    <Grid container direction="column" className="App">
      You can type here below:
      <TextField
        value={"This is a example, select a word from this string"}
        onSelect={(event) => handleOnSelect(event)}
      />
      <br />
      <Grid item>The selected word starts at character: {startText}</Grid>
      <Grid item>The selected word ends at character: {endText}</Grid>
    </Grid>
  );
}

Câu trả lời #1

Đây là một trường hợp khó vì thành phần TextField của material-ui liên quan đến nhiều node lồng nhau. Đối số được truyền vào hàm onSelect là một div. Tuy nhiên, sự kiện thực sự xảy ra trên một input bên trong div.

const handleOnSelect = (event: React.SyntheticEvent<HTMLDivElement, Event>) => {
    console.log(event.target, event.currentTarget);
};

Điều này ghi lại input và sau đó là div.

Sử dụng event.currentTarget sẽ lấy thông tin Typescript rất cụ thể. Chúng ta biết rằng nó là một HTMLDivElement. Nhưng div không có các thuộc tính selectionStart và selectionEnd mà chúng ta muốn truy cập. Những thuộc tính đó tồn tại trên input.

event.target cung cấp cho chúng ta một kiểu rất mơ hồ cho EventTarget. Chúng ta không biết rằng target là một input.

Một tùy chọn là xác minh phần tử tại thời gian chạy.

const handleOnSelect = (event: React.SyntheticEvent<HTMLDivElement, Event>) => {
    if ( event.target instanceof HTMLInputElement ) {
        setStartText(event.target.selectionStart);
        setEndText(event.target.selectionEnd);
    }
};

Vì bạn biết rằng sự kiện sẽ luôn xảy ra trên một HTMLInputElement, tôi nghĩ rằng an toàn khi đưa ra một khẳng định.

const handleOnSelect = (event: React.SyntheticEvent<HTMLDivElement, Event>) => {
    const target = event.target as HTMLInputElement;
    setStartText(target.selectionStart);
    setEndText(target.selectionEnd);
};

Lưu ý rằng các thuộc tính selectionStart và selectionEnd sử dụng null thay vì undefined. Vì vậy bạn sẽ muốn thay đổi kiểu trạng thái của mình thành <number | null> hoặc thay null bằng undefined bằng cách sử dụng hợp nhất null event.target.selectionStart ?? undefined.