টাইপসক্রিপ্ট ইনপুট অনচেঞ্জ ইভেন্ট। স্টেট। মূল্য

Question

আমার প্রতিক্রিয়া এবং টাইপ করা বিষয় অ্যাপ্লিকেশন, আমি ব্যবহার করুন: 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'.

Answer 1

সাধারণত ইভেন্ট হ্যান্ডলারের ব্যবহার করা উচিত e.currentTarget.value, যেমন:

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

কেন এটি এখানে রয়েছে তা আপনি পড়তে পারেন ( "সিন্থেটিক এভেন্ট। ডেটকে জেনেরিক করুন, সিন্থেটিক এভেন্টকন্ট্রেন্টার টার্গেট নয়।" ) রিভার্ট করুন ।

ইউপিডি: @ রোজার-গুসমও উল্লিখিত হিসাবে ChangeEventফর্ম ইভেন্টগুলি টাইপ করার জন্য আরও উপযুক্ত।

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

Comments

এটি সহজভাবে কাজ করে না। মান ইন্টারফেসের সম্পত্তি নয় ইভেন্ট ইভেন্টটিজ

— tocqueville

অবশ্যই ইভেন্টটিজেট নয়, তবে এইচটিএমএল ইনপুট উপাদানটির অংশ আপনি এখানে সম্পূর্ণ সংজ্ঞা দেখতে পারবেন github.com/DefinitelyType

— //

ওহ দুঃখিত, আপনি ব্যবহার করেছেন currentTarget। সেক্ষেত্রে হ্যাঁ, এটি কাজ করে, তবে প্রশ্নটি ছিলtarget

— টোক্কভিলে

হ্যাঁ, আপনি ঠিক বলেছেন, তবে বেশিরভাগ ক্ষেত্রেই ভুল ব্যবহার করে github.com/DefinitelyType // DefinitelyTypeed/pull/12239 তে উল্লিখিত হয়েছে target। তদুপরি, লক্ষ্যটি Tআমাদের সঠিকভাবে লিখতে বাধ্য করতে হবে না

— ইয়োজি

এটি আমার পক্ষে কাজ করে না, আমাকে React.ChangeEvent<HTMLInputElement>ফর্মএভেন্টের পরিবর্তে ইভেন্টটি কাস্ট করতে হয়েছিল।

— Oblivionkey3

Answer 2

টাইপস্ক্রিপ্টে সঠিকভাবে ব্যবহার করার উপায়

  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;

Comments

নোট: নিশ্চিত করার প্রকার উপলব্ধ রয়েছে যোগ lib: ["dom"]করার compilerOptionsমধ্যেtsconfig.json

— জেমস Conkling

@ জেমস কনকলিং আপনাকে অনেক ধন্যবাদ!

— আলেকজান্দে রিভেস্ট

এবং যদি আপনার একাধিক ইনপুট থাকে তবে আপনার প্রত্যেকটির জন্য একটি সারি তৈরি করা দরকার?

— ট্রেভর উড

'এটি' হ্যান্ডেল চেঞ্জ ফাংশনে যথাযথভাবে নির্ধারিত হয়েছে তা নিশ্চিত করার আরেকটি উপায় হ্যান্ডেল চ্যাঞ্জকে তীর ফাংশন হিসাবে হ্যান্ডেল চেঞ্জ লিখুন হ্যান্ডেলচেনজ = (ই: রিঅ্যাক্ট করুন han চেঞ্জইভেন্ট <এইচটিএমএল ইনপুটমেন্ট>) =>। এই স্টেটসেট (...); }; এটি করে, হ্যান্ডেলএভেন্ট ফাংশনটি আবদ্ধ করার জন্য আর কোনও কনস্ট্রাক্টর ব্যবহার করতে হবে না।

— tlavarea

কনস্ট্রাক্টর এবং বাইন্ড পদ্ধতি ব্যবহার না করে 'এটি' হ্যান্ডেল করার আরও একটি উপায় হ'ল onChange প্রোপ অর্থাৎ অনচেন্জ = {ই => এই.এন্ডল চ্যাঞ্জ (ই)}

— তেলাভারে

Answer 3

as HTMLInputElement আমার জন্য কাজ কর

Answer 4

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

সংকলন ত্রুটি ছাড়া। প্রকৃতপক্ষে, আপনি আপনার অন্যান্য উপাদানগুলির জন্য প্রথম দুটি ইন্টারফেসও ব্যবহার করতে পারেন।

Comments

মান টাইপ স্ট্রিং নয়!

— রজার গুসমাও

Answer 5

ভাগ্যবান আমি একটি সমাধান খুঁজে। আপনি পারেন

'প্রতিক্রিয়া' থেকে আমদানি করুন {চেঞ্জইভেন্ট;

এবং তারপরে কোডটি লিখুন: e:ChangeEvent<HTMLInputElement>

Answer 6

এখানে ES6 অবজেক্টের ডেস্ট্রাকচারিংয়ের একটি উপায় রয়েছে, টিএস 3.3 দিয়ে পরীক্ষিত।
এই উদাহরণটি একটি পাঠ্য ইনপুট জন্য।

name: string = '';

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

Answer 7

এটি যখন আপনি কোনও 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;
}}

Answer 8

  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।

Answer 9

শিশু উপাদান ব্যবহার করার সময় আমরা এই জাতীয় প্রকারটি পরীক্ষা করি check

মূল উপাদান:

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

Answer 10

একটি বিকল্প যা এখনও উল্লেখ করা হয়নি তা হ'ল এটি প্রাপ্ত প্রসগুলির পরিবর্তে অন চেঞ্জ ফাংশন টাইপ করা। প্রতিক্রিয়া.চেন্জএভেন্টহ্যান্ডলার ব্যবহার:

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

Answer 11

ধন্যবাদ @haind

হ্যাঁ HTMLInputElementইনপুট ক্ষেত্রে কাজ করে

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

এটি HTMLInputElementইন্টারফেস হ'ল উত্তরাধিকার HTMLElementসূত্রে প্রাপ্ত যা থেকে EventTargetমূল স্তর থেকে উত্তরাধিকার সূত্রে প্রাপ্ত । অতএব আমরা asপ্রসঙ্গ অনুযায়ী নির্দিষ্ট ইন্টারফেস ব্যবহার করতে অপারেটরকে দৃ as়ভাবে বলতে পারি যেমন এই ক্ষেত্রে আমরা HTMLInputElementইনপুট ক্ষেত্রে অন্যান্য ইন্টারফেসের জন্য ব্যবহার করতে পারি HTMLButtonElement, HTMLImageElementইত্যাদি etc.

আরও রেফারেন্সের জন্য আপনি অন্যান্য উপলব্ধ ইন্টারফেসটি এখানে পরীক্ষা করতে পারেন

• মজিলা ওয়েব এপিআই ইন্টারফেস
• মাইক্রোসফ্ট দ্বারা বাহ্যিক নোড মডিউলগুলিতে ইন্টারফেস