ReactJS 오류 경고

ReactJS 오류 경고

ReactJS를 사용하여 첫 번째 애플리케이션을 만들고 있는데 코드를 실행하면 다음과 같은 경고가 나타납니다.

경고: 실패한 형식 propType: 다음을 제공했습니다.checked폼필드에 붙이지 않고 버팀목을 누르다onChange핸들러그러면 읽기 전용 필드가 렌더링됩니다.필드를 변경할 수 있는 경우defaultChecked. 그렇지 않으면 다음 중 하나를 설정합니다.onChange또는readOnly. 렌더링 방법을 확인합니다.Login.

제가 어떻게 고치는지 누가 좀 알려주시겠어요?

React에는 폼 컨트롤과 관련된 두 가지 작업 방법(제어된 구성 요소와 제어되지 않은 구성 요소)이 있습니다.

제어에 필요한 속성도 제어되지 않은 컴포넌트에 필요한 속성도 제공하지 않으면 다음 경고가 표시됩니다.

경고: failed form propType: onChange 핸들러가 없는 폼필드에 체크된 프로포트를 제공했습니다.그러면 읽기 전용 필드가 렌더링됩니다.필드를 변경할 수 있는 경우 default Checked를 사용합니다.그렇지 않으면 onChange 또는 readOnly를 설정합니다.Login의 렌더 방식을 확인합니다.

제어된 컴포넌트

---

필요한 속성:

1. value-<input>(체크박스나 무선이 아님),<select>,<textbox>또는checked(라디오 또는 무선)용입니다.
2. onChange

---

React는 다음 정보를 업데이트하여 요소의 상태를 처리합니다.value또는checkedAtribute(요소에 따라 다름)를 사용하여props또는state데이터를 삽입하거나 체크박스를 켜면 컴포넌트가 재생될 때 엘리먼트의 상태를 갱신할 수 있도록 변경 시 리액션을 통지해야 합니다.그러기 위해서는 다음 사항을 포함해야 합니다.onChange핸들러: 이 핸들러에서state또는 컴포넌트의 부모에게 통지하여 컴포넌트가 업데이트되도록 합니다.props.

<input
  type="checkbox"
  checked={ this.props.checked }
  onChange={ this.checkboxHandler } 
/>

const { render } = ReactDOM;

class Demo extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      checked: true
    };
    
    this.checkboxHandler = this.checkboxHandler.bind(this);
  }
  
  checkboxHandler(e) {
    this.setState({
      checked: e.target.checked
    });
  }
  
  render() {
    return (
      <input
        type="checkbox"
        checked={ this.state.checked }
        onChange={ this.checkboxHandler } 
      />
    );
  }
}

render(
  <Demo />,
  document.getElementById('demo')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>

<h1>The Checkbox</h1>

<div id="demo"></div>

제어되지 않는 컴포넌트

---

필요한 속성:

defaultValue-<input>(체크박스나 무선이 아님),<select>,<textbox>또는defaultChecked(라디오 또는 무선)용입니다.

---

React는 를 사용하여 초기값을 설정하며, 요소 상태의 업데이트는 사용자가 제어합니다(일반적으로 참조를 사용하는 DOM을 통해).

<input
  type="checkbox"
  defaultChecked={ this.props.checked } 
/>

그defaultChecked향후 컴포넌트를 재설치할 경우 업데이트되지 않을 수 있으므로 이 접근방식을 주의하여 사용하십시오.

공백 기능을 사용하여 경고를 제거하는 것이 더 나을 수 있습니다.특히 처리하려면 체크박스와 관련 텍스트를 포함하는 전체 div를 클릭합니다.

<div onClick={this.handleClick}>
  <input type="checkbox" checked={this.props.checked} onChange={()=>{}}/>
  {this.props.text}
</div>

를 추가해야 합니다.defaultChecked귀속checkbox:

<div>
    <input type='checkbox' defaultChecked />
</div>

클래스 컴포넌트보다 기능 컴포넌트를 선호하는 경우,Controlled Component접근방식은 심플하고 구현이 용이합니다. 게 Controlled Component@Ori Drori orioriori orioriori oriori oriori orioriori oriori orioriori oriori oriori orioriori 。

import {useState} from "react";

export default function YourComponentName(){

  const [checked, setChecked] = useState(true);

  return (
    <>
          <input
            type="checkbox"
            checked={checked}
            onChange={() => setChecked(!checked)}
          />
    </>
  );
};

이 경고가 발생하면 입력에 "읽기 전용"을 추가할 수 있습니다.다음과 같은 코드:

<div>
    <input type='checkbox' checked={ props.checkBoxChecked } readOnly />
</div>

또는 빈 화살표 기능이나 원하는 기능의 onChange 이벤트를 입력에 추가할 수 있습니다.다음과 같습니다.

<div>
    <input type='checkbox' checked={ props.checkBoxChecked } onChange={() => {}} />
</div>

또한 가치 속성도 고려해야 합니다.이 솔루션은 동일한 경고로 문제를 해결했습니다. 유용하기를 바랍니다.

언급URL : https://stackoverflow.com/questions/36715901/reactjs-error-warning