Tìm kiếm trang web

reactjs - Typescript đầu vào onchange event.target.value

Trong ứng dụng React và TypeScript của tôi, tôi sử dụng:

onChange={(e) => data.motto = (e.target as any).value}

Làm thế nào để tôi định nghĩa đúng các kiểu cho lớp, để tôi không phải lách kiểu trong hệ thống kiểu với any?

export interface InputProps extends React.HTMLProps<Input> {
...

}

export class Input extends React.Component<InputProps, {}> {
}

Nếu tôi đặt target: { value: string }; tôi nhận được:

ERROR in [default] /react-onsenui.d.ts:87:18
Interface 'InputProps' incorrectly extends interface 'HTMLProps<Input>'.
  Types of property 'target' are incompatible.
    Type '{ value: string; }' is not assignable to type 'string'.

Câu trả lời #1

Nói chung, các bộ xử lý sự kiện nên sử dụng e.currentTarget.value:

Bạn có thể đọc lý do tại sao ở đây (Hoàn tác "Làm cho SyntheticEvent.target tổng quát, không phải SyntheticEvent.currentTarget.").

const onChange = (e: React.ChangeEvent<HTMLInputElement >) => {
  const newValue = e. currentTarget.value;
}

Câu trả lời #2

cách đúng để sử dụng trong TypeScript là

  handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    // No longer need to cast to any - hooray for react!
    this.setState({temperature: e.target.value});
  }

  render() {
        ...
        <input value={temperature} onChange={this.handleChange} />
        ...
    );
  }

Theo dõi toàn bộ lớp học, sẽ tốt hơn để hiểu:

import * as React from "react";

const scaleNames = {
  c: 'Celsius',
  f: 'Fahrenheit'
};


interface TemperatureState {
   temperature: string;
}

interface TemperatureProps {
   scale: string;

}

class TemperatureInput extends React.Component<TemperatureProps, TemperatureState> {
  constructor(props: TemperatureProps) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {temperature: ''};
  }

  //  handleChange(e: { target: { value: string; }; }) {
  //    this.setState({temperature: e.target.value});  
  //  }


  handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    // No longer need to cast to any - hooray for react!
    this.setState({temperature: e.target.value});
  }

  render() {
    const temperature = this.state.temperature;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>Enter temperature in {scaleNames[scale]}:</legend>
        <input value={temperature} onChange={this.handleChange} />
      </fieldset>
    );
  }
}

export default TemperatureInput;

Câu trả lời #3

Bạn có thể làm những điều sau:

import { ChangeEvent } from 'react';

const onChange = (e: ChangeEvent<HTMLInputElement>)=> {
   const newValue = e.target.value;
}

Câu trả lời #4

ChangeEvent<HTMLInputElement> là kiểu cho sự kiện thay đổi trong TypeScript. Đây là cách thực hiện-

import { ChangeEvent } from 'react';

const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
};

Câu trả lời #5

chúng ta cũng có thể sử dụng sự kiện onChange khởi chạy với các kiểu đã định nghĩa (trong component hàm) như sau:

 const handleChange = (
    e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
  ) => {
        const name = e.target.name;
        const value = e.target.value;
};

Câu trả lời #6

as HTMLInputElement có hiệu quả với tôi

Câu trả lời số 7

Tôi sử dụng một cái gì đó như thế này:

import { ChangeEvent, useState } from 'react';


export const InputChange = () => {
  const [state, setState] = useState({ value: '' });

  const handleChange = (event: ChangeEvent<{ value: string }>) => {
    setState({ value: event?.currentTarget?.value });
  }
  return (
    <div>
      <input onChange={handleChange} />
      <p>{state?.value}</p>
    </div>
  );
}

Câu trả lời số 8

target mà bạn đã cố gắng thêm trong InputProps không phải là target mà bạn muốn, cái mà nằm trong React.FormEvent

Vì vậy, giải pháp mà tôi có thể nghĩ ra là mở rộng các loại liên quan đến sự kiện để thêm loại mục tiêu của bạn, như sau:

interface MyEventTarget extends EventTarget {
    value: string
}

interface MyFormEvent<T> extends React.FormEvent<T> {
    target: MyEventTarget
}

interface InputProps extends React.HTMLProps<Input> {
    onChange?: React.EventHandler<MyFormEvent<Input>>;
}

Khi bạn có những lớp đó, bạn có thể sử dụng thành phần nhập liệu của mình như

<Input onChange={e => alert(e.target.value)} />

không có lỗi biên dịch. Thực tế, bạn cũng có thể sử dụng hai giao diện đầu tiên ở trên cho các thành phần khác của bạn.

Câu trả lời #9

Khi sử dụng Component Con, chúng tôi kiểm tra kiểu như thế này.

Thành phần cha:

export default () => {

  const onChangeHandler = ((e: React.ChangeEvent<HTMLInputElement>): void => {
    console.log(e.currentTarget.value)
  }

  return (
    <div>
      <Input onChange={onChangeHandler} />
    </div>
  );
}

Thành phần con:

type Props = {
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
}

export Input:React.FC<Props> ({onChange}) => (
  <input type="tex" onChange={onChange} />
)

Câu trả lời số 10

Một phương án thay thế chưa được đề cập đến là ghi kiểu cho hàm onChange thay vì các props mà nó nhận. Sử dụng React.ChangeEventHandler:

const stateChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
    console.log(event.target.value);
};

Câu trả lời số 11

const handleChange = (
    e: ChangeEvent<HTMLInputElement>
  ) => {
    const { name, value } = e.target;
    this.setState({ ...currentState, [name]: value });
  };

bạn có thể áp dụng điều này cho mọi phần tử input trong thành phần biểu mẫu

Câu trả lời #12

const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = (event.target || event.currentTarget) as HTMLInputElement;
    return newValue.value;
}

Bài viết liên quan