React 확인란 이벤트 및 핸들러의 스크립트 유형을 선택하십시오.

React 확인란 이벤트 및 핸들러의 스크립트 유형을 선택하십시오.

타이프스크립트에 있는 리액트 예시와 같은 것을 만들고 있습니다.목표는 상태를 가진 부모를 갖는 것이며 클릭을 다시 부모에게 전달하는 여러 상태 비저장 하위 구성 요소를 생성하는 것입니다.

이 예는 Javascript에 있기 때문에 입력 상자 이벤트와 onChange 핸들러의 종류를 알 수 없습니다...?저는 몇 가지 옵션을 시도해 봤어요React.MouseEvent<HTMLInputElement>하지만 그건 추측일 뿐이야

부모 컴포넌트가 imageRows를 생성하여 핸들러를 전달합니다.

render() {
  <div>
    <ImageRow key={el.url} onChange={this.onChange}/>
  </div>
 }
 // what should the type of e be?
 onChange(e:any){
 }

ImageRow 컴포넌트

export interface ImageRowProps { 
  genre: Array<number>
  url: string
  onChange : any // what is the type of the callback function?
}

export class ImageRow extends React.Component<ImageRowProps> {
  render() {
    return <div className="imagerow">
        <input type="checkbox" key={index} onChange={this.props.onChange} defaultChecked={(num == 1)}/>
    </div>
}

편집

유사한 질문에는 이벤트 유형만 표시되며 핸들러 유형은 표시되지 않습니다.이벤트 유형을 변경할 때:

onChange(e: React.FormEvent<HTMLInputElement>){
    console.log(e.target.value)
}

다음의 에러가 표시됩니다.

Property 'value' does not exist on type 'EventTarget'.

확실하지 않은 경우 화살표를 사용하여 추론할 수 있습니다.

정답.

고객님의 경우e이React.ChangeEvent<HTMLInputElement>.

저희 어플리케이션에서는

console.log(event.target.value);// 작동하지 않음(빈 값)

console.log(이벤트.타겟).on); // 정상적으로 동작(true/false)

//../src/components/testpage2/index.tsx

import * as React from 'react';
import {  TestInput } from '@c2/component-library';

export default class extends React.Component<{}, {}> {
    state = {
                model: {
                    isUserLoggedIn: true
                }            
            };

    onInputCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        console.log(event.target.value); // Not Working
        console.log(event.target.checked); // Working

        const field = event.target.name;
        const model = this.state.model;      
        model[field] = event.target.checked;

        return this.setState({model: model});
    };

    render() {
        return (
            <div>
                <TestInput name="isUserLoggedIn" label="Is User LoggedIn : " type="checkbox" onChange={this.onInputCheckboxChange} />
            </div>
        );
    }
}

//=============================================================//

import * as React from 'react';
//import * as cs from 'classnames';

export interface TestInputProps extends React.HTMLAttributes<HTMLInputElement> {
    name: string;
    label: string;
    onChange: React.ChangeEventHandler<HTMLInputElement>;
    placeholder?: string;
    value?: string;
    type?: string;
    error?: string;
    className?: string;
}

export const TestInput : React.SFC<TestInputProps> = ({ name, label, onChange, placeholder, value, type, className, error, ...rest }) => {
    let wrapperClass:string = 'form-group';
    if (error && error.length > 0) {
      wrapperClass += " " + 'has-error';
    }

    return (
        <div className={wrapperClass}>
            <label htmlFor={name}>{label}</label>
            <div className="field">
                <input
                type={type}
                name={name}
                className="form-control"
                placeholder={placeholder}
                value={value}
                onChange={onChange}/>
                {error && <div className="alert alert-danger">{error}</div>}
            </div>
        </div>
    );
}

TestInput.defaultProps ={
    type: "text"
}

다음 작업을 수행합니다.

onChange = (event: Event) => {
      const { value } = event.target as unknown as { value: boolean, };
      setState(value);
};
  
<input type='radio' onChange={this.onChange} />

그리고 스키지 라인은 사라질 것이다.

언급URL : https://stackoverflow.com/questions/45665188/typescript-types-for-react-checkbox-events-and-handlers