programing

스크립트 입력 onchange event.target.value

testmans 2023. 3. 21. 21:48
반응형

스크립트 입력 onchange event.target.value

리액트 및 타이프스크립트 앱에서는 다음을 사용합니다.

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

어떻게 하면 수업의 오타를 정확하게 정의해서, 그 때문에 활자 시스템을 해킹할 필요가 없어집니다.any?

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

}

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

내가 넣으면target: { value: string };다음과 같은 것이 있습니다.

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'.

일반적으로 이벤트 핸들러는e.currentTarget.value예:

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

그 이유는 여기에서 확인할 수 있습니다("Make SyntheticEvent.currentTarget"이 아닌 SyntheticEvent.targeneric으로 변경).

UPD: @roger-gusmao에서 언급한 바와 같이ChangeEvent폼 이벤트 입력에 더 적합합니다.

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

TypeScript에서 사용하는 올바른 방법은 다음과 같습니다.

  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} />
        ...
    );
  }

수강을 마치면 다음 사항을 이해하는 것이 좋습니다.

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;

다음을 수행할 수 있습니다.

import { ChangeEvent } from 'react';

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

ChangeEvent<HTMLInputElement>는 타이프스크립트 내의 변경 이벤트 유형입니다.이렇게 하는 거야

import { ChangeEvent } from 'react';

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

또한 다음과 같이 정의된 유형(기능 컴포넌트)을 사용하여 onChange 이벤트 부팅을 사용할 수 있습니다.

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

as HTMLInputElement나에겐 통한다

그target추가하려고 했습니다.InputProps같지 않다target당신은 어느 것이 들어가길 원했는가?React.FormEvent

그래서 생각할 수 있는 솔루션은 이벤트 관련 유형을 확장하여 다음과 같이 타겟 유형을 추가하는 것입니다.

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>>;
}

이러한 클래스가 있으면 입력 컴포넌트를 다음과 같이 사용할 수 있습니다.

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

컴파일 에러가 발생하지 않습니다.실제로 위의 첫 번째 2개의 인터페이스를 다른 컴포넌트에도 사용할 수 있습니다.

다음과 같은 것을 사용합니다.

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

Child Component를 사용할 때 다음과 같은 유형을 확인합니다.

상위 컴포넌트:

export default () => {

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

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

하위 구성 요소:

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

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

아직 언급되지 않은 대안은 수신되는 소품 대신 onChange 함수를 입력하는 것입니다.리액트 사용ChangeEventHandler:

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

다음은 TS 3.3에서 테스트한 ES6 객체 파괴 방법입니다.
이 예는 텍스트 입력용입니다.

name: string = '';

private updateName({ target }: { target: HTMLInputElement }) {
    this.name = target.value;
}

이것은 프레임워크에 의존하지 않는 나에게도 효과가 있습니다.

const handler = (evt: Event) => {
  console.log((evt.target as HTMLInputElement).value))
}

이 때, 고객님이 고객님과 함께 작업하실 때,FileList오브젝트:

onChange={(event: React.ChangeEvent<HTMLInputElement>): void => {
  const fileListObj: FileList | null = event.target.files;
  if (Object.keys(fileListObj as Object).length > 3) {
    alert('Only three images pleaseeeee :)');
  } else {
    // Do something
  }

  return;
}}

감사합니다 @haind

네.HTMLInputElement입력 필드에 대해 작동됨

//Example
var elem = e.currentTarget as HTMLInputElement;
elem.setAttribute('my-attribute','my value');
elem.value='5';

이것.HTMLInputElement인터페이스 상속원HTMLElement로부터 물려받은 것EventTargetroot 레벨에서.따라서 우리는 다음을 사용하여 주장할 수 있다.as오퍼레이터는 이 경우처럼 컨텍스트에 따라 특정 인터페이스를 사용합니다.HTMLInputElement입력 필드의 경우 다른 인터페이스는HTMLButtonElement,HTMLImageElement기타.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

자세한 내용은 다른 사용 가능한 인터페이스를 참조하십시오.

다음과 같이 하면 입력할 필요가 없습니다.

<input onChange={(event) => { setValue(e.target.value) }} />

html 태그에서 직접 화살표 함수를 사용하여 새 값을 설정하면 기본적으로 typescript는 이벤트 유형을 인식합니다.

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

해서 모든 사람에게 할 수 .input 컴포넌트 내의 

  function handle_change(
    evt: React.ChangeEvent<HTMLInputElement>
  ): string {
    evt.persist(); // This is needed so you can actually get the currentTarget
    const inputValue = evt.currentTarget.value;

    return inputValue
  }

꼭 계셔야 합니다."lib": ["dom"] 안에서tsconfig.

문자열을 숫자 단순 답변으로 변환

<input
    type="text"
    value={incrementAmount}
    onChange={(e) => {
      setIncrementAmmount(+e.target.value);
    }}
/>

import { NativeSyntheticEvent, TextInputChangeEventData,} from 'react-native';



  // Todo in java script
 const onChangeTextPassword = (text : any) => {
    setPassword(text);
  }

// 스크립트 유형의 작업관리 사용

  const onChangeTextEmail = ({ nativeEvent: { text },}: NativeSyntheticEvent<TextInputChangeEventData>) => {
    console.log("________ onChangeTextEmail _________ "+ text);
    setEmailId(text);
  };


 <TextInput
          style={{ width: '100%', borderBottomWidth: 1, borderBottomColor: 'grey', height: 40, }}
          autoCapitalize="none"
          returnKeyType="next"
          maxLength={50}
          secureTextEntry={false}
          onChange={onChangeTextEmail}
          value={emailId}
          defaultValue={emailId}
          
        />

  

const event = { target: { value: 'testing' } as HTMLInputElement };
handleChangeFunc(event as ChangeEvent<HTMLInputElement>);

난 이게 좋아.

언급URL : https://stackoverflow.com/questions/40676343/typescript-input-onchange-event-target-value

반응형

'programing' 카테고리의 다른 글

React에 내장된 프로덕션과 개발의 차이점JS  (0) 2023.03.21
리액트 라우터를 사용하여 프로그래밍 방식으로 탐색  (0) 2023.03.21
JSON에서 큰따옴표를 피하는 방법  (0) 2023.03.21
Mongo DB에 저장과 삽입의 차이점은 무엇입니까?  (0) 2023.03.21
Spring JPA를 사용하여 엔티티의 선택된 속성만 가져오려면 어떻게 해야 합니까?  (0) 2023.03.21

'programing'의 다른글

  • 현재글스크립트 입력 onchange event.target.value

관련글

댓글

티스토리툴바