기능적 구성 요소의 React js 설정 상태

옅은 파란색 점

기능적인 로그인 구성 요소를 만들려고합니다. onChange에 대해 댓글을 달았을 때 브라우저에서 아래 오류가 발생합니다.

index.js:1 Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

그리고 onChange의 주석 처리를 제거하고 사용자 이름 필드를 시도하면 아래 오류가 발생합니다 .Login.js : 20 Uncaught TypeError : Cannot read property 'inputChangedHandler'of undefined at onChange (Login.js : 20)

그것을 해결하는 방법? import React, {useState, props} from 'react';

const Login = (prop) => {

    const [username] = useState('Mr x');


    const inputChangedHandler = (event) => {
        const updatedKeyword = event.target.value;
        // May be call for search result
    }


    return (
        <div>
            <h1>Login</h1>
            <div className="container">

                User Name: <input type="text" name="username" value={username}
                  //  onChange={(event) => this.inputChangedHandler(event)}
                     />

                    Password: <input type="password" name="password" />
                <button className="btn btn-success"  >Login</button>
            </div>
        </div>
    )
}


export default Login;
Shmili Breuer

당신은 제거 할 필요 this에서this.inputChangedHandler(event)

그리고 실제로 값을 변경하려면 useState이것에 setter를 추가해야 합니다.const [username,setUsername] = useState('Rahul Raj');

그리고 이렇게 사용하세요 onChange={(event) => setUsername(event.target.value)}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

React : 기능적 구성 요소 내에서 컨테이너의 상태 설정

분류에서Dev

React JS의 기능적 구성 요소에서 후크 상태의 값 데이터 유형을 정의하는 방법이 있습니까?

분류에서Dev

React.js-초기 상태 설정 및 구성 요소 내에서 해당 상태를 활용하는 소품 정의

분류에서Dev

React 기능 구성 요소의 상태 변수를 기반으로 조건부로 className 설정

분류에서Dev

React의 특정 구성 요소에 대한 상태 설정

분류에서Dev

다른 기능 구성 요소 내부의 후크 기능 구성 요소에 대한 상태 설정

분류에서Dev

데이터베이스에서 데이터를 가져오고 React.js 구성 요소 상태로 설정

분류에서Dev

React Navigation setOptions로 기능 구성 요소의 메서드 및 상태 사용

분류에서Dev

React-동적 렌더링 시맨틱 UI 드롭 다운 구성 요소에 대한 느린 상태 설정

분류에서Dev

반응 기능 구성 요소의 소품 변경에서 상태를 설정합니까?

분류에서Dev

React JS에서 특정 키로 자식 구성 요소를 클릭하면 부모 구성 요소의 상태 변경

분류에서Dev

React : 기능 구성 요소의 상태 변경 기능 구성 요소의 props 값과 부모 클래스 상태도 변경

분류에서Dev

기능 구성 요소에서 상태를 설정할 수 없습니다.

분류에서Dev

기능 구성 요소에서 양식 제출시 상태 설정

분류에서Dev

React에서 부모 구성 요소는 응답에서 자식 구성 요소에서 수행되는 비동기 가져 오기 기능의 상태를 어떻게 설정할 수 있습니까?

분류에서Dev

상태에 따라 동적 React Route 구성 요소 만들기

분류에서Dev

반응 기능 구성 요소의 상태를 설정하지 못했습니다.

분류에서Dev

React Spring useTransition 상태 업데이트로 기존 구성 요소 수정

분류에서Dev

Checkbox는 React JS의 구성 요소에서 상태를 유지합니다.

분류에서Dev

react.js의 부모 구성 요소에서 자식 구성 요소의 이벤트 처리기 기능을 재정의하는 방법

분류에서Dev

React hooks-부모 구성 요소에서 재설정 상태 전달

분류에서Dev

React.js-기능적 구성 요소-DOM 조작, 요소 스타일 변경

분류에서Dev

앱에서 여러 구성 요소로 React 양식 상태를 전달하는 방법 (기능적)

분류에서Dev

React js 구성 요소의 목록에 검색 상자 만들기

분류에서Dev

API에서 세부 정보 가져 오기 및 조건에 따른 상태 설정-기능 구성 요소

분류에서Dev

효소 : 상태 비 저장 기능 구성 요소가 정의되지 않은 소품을 반환합니다.

분류에서Dev

상태 기반 React 구성 요소 간의 실시간 업데이트

분류에서Dev

React 구성 요소의 상태 변경 후 예기치 않은 동작

분류에서Dev

React 기능 구성 요소에서 부실 상태를 피하는 방법

Related 관련 기사

  1. 1

    React : 기능적 구성 요소 내에서 컨테이너의 상태 설정

  2. 2

    React JS의 기능적 구성 요소에서 후크 상태의 값 데이터 유형을 정의하는 방법이 있습니까?

  3. 3

    React.js-초기 상태 설정 및 구성 요소 내에서 해당 상태를 활용하는 소품 정의

  4. 4

    React 기능 구성 요소의 상태 변수를 기반으로 조건부로 className 설정

  5. 5

    React의 특정 구성 요소에 대한 상태 설정

  6. 6

    다른 기능 구성 요소 내부의 후크 기능 구성 요소에 대한 상태 설정

  7. 7

    데이터베이스에서 데이터를 가져오고 React.js 구성 요소 상태로 설정

  8. 8

    React Navigation setOptions로 기능 구성 요소의 메서드 및 상태 사용

  9. 9

    React-동적 렌더링 시맨틱 UI 드롭 다운 구성 요소에 대한 느린 상태 설정

  10. 10

    반응 기능 구성 요소의 소품 변경에서 상태를 설정합니까?

  11. 11

    React JS에서 특정 키로 자식 구성 요소를 클릭하면 부모 구성 요소의 상태 변경

  12. 12

    React : 기능 구성 요소의 상태 변경 기능 구성 요소의 props 값과 부모 클래스 상태도 변경

  13. 13

    기능 구성 요소에서 상태를 설정할 수 없습니다.

  14. 14

    기능 구성 요소에서 양식 제출시 상태 설정

  15. 15

    React에서 부모 구성 요소는 응답에서 자식 구성 요소에서 수행되는 비동기 가져 오기 기능의 상태를 어떻게 설정할 수 있습니까?

  16. 16

    상태에 따라 동적 React Route 구성 요소 만들기

  17. 17

    반응 기능 구성 요소의 상태를 설정하지 못했습니다.

  18. 18

    React Spring useTransition 상태 업데이트로 기존 구성 요소 수정

  19. 19

    Checkbox는 React JS의 구성 요소에서 상태를 유지합니다.

  20. 20

    react.js의 부모 구성 요소에서 자식 구성 요소의 이벤트 처리기 기능을 재정의하는 방법

  21. 21

    React hooks-부모 구성 요소에서 재설정 상태 전달

  22. 22

    React.js-기능적 구성 요소-DOM 조작, 요소 스타일 변경

  23. 23

    앱에서 여러 구성 요소로 React 양식 상태를 전달하는 방법 (기능적)

  24. 24

    React js 구성 요소의 목록에 검색 상자 만들기

  25. 25

    API에서 세부 정보 가져 오기 및 조건에 따른 상태 설정-기능 구성 요소

  26. 26

    효소 : 상태 비 저장 기능 구성 요소가 정의되지 않은 소품을 반환합니다.

  27. 27

    상태 기반 React 구성 요소 간의 실시간 업데이트

  28. 28

    React 구성 요소의 상태 변경 후 예기치 않은 동작

  29. 29

    React 기능 구성 요소에서 부실 상태를 피하는 방법

뜨겁다태그

보관