실패한 폼 propType: "onChange" 핸들러가 없는 폼 필드에 "값" 프로포트를 제공했습니다.

실패한 폼 propType: "onChange" 핸들러가 없는 폼 필드에 "값" 프로포트를 제공했습니다.

리액트 앱을 로드하면 콘솔에 이 오류가 나타납니다.

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

AppFrame 컴포넌트는 다음과 같습니다.

class AppFrame extends Component {
    render() {
        return (
            <div>
                <header className="navbar navbar-fixed-top navbar-shadow">
                    <div className="navbar-branding">
                        <a className="navbar-brand" href="dashboard">
                            <b>Shire</b>Soldiers
                        </a>
                    </div>
                    <form className="navbar-form navbar-left navbar-search alt" role="search">
                        <div className="form-group">
                            <input type="text" className="form-control" placeholder="Search..."
                                   value="Search..."/>
                        </div>
                    </form>
                    <ul className="nav navbar-nav navbar-right">
                        <li className="dropdown menu-merge">
                            <span className="caret caret-tp hidden-xs"></span>
                        </li>
                    </ul>
                </header>

                <aside id="sidebar_left" className="nano nano-light affix">

                    <div className="sidebar-left-content nano-content">

                        <ul className="nav sidebar-menu">
                            <li className="sidebar-label pt20">Menu</li>
                            <li className="sidebar-label">
                                <IndexLink to="/" activeClassName="active">Dashboard</IndexLink>
                            </li>
                            <li className="sidebar-label">
                                <Link to="/fixtures" activeClassName="active">Fixtures</Link>
                            </li>
                            <li className="sidebar-label">
                                <Link to="/players" activeClassName="active">Players</Link>
                            </li>
                        </ul>

                    </div>

                </aside>
                <section id="content_wrapper">
                    <section id="content" className="table-layout animated fadeIn">
                        {this.props.children}
                    </section>
                </section>
            </div>

        )
    }
}

export default AppFrame;

나는 여기서 내가 무엇을 잘못하고 있는지 알아내려고 애쓰고 있다.응용 프로그램이 부팅되어 작동하지만 콘솔 경고/오류를 모두 제거하려고 합니다.

검색 입력에 직접 값을 입력했습니다. 이미 자리 표시자가 있기 때문에 이점을 알 수 없습니다.다음에서 값을 제거할 수 있습니다.

<input type="text" className="form-control" placeholder="Search..." value="Search..."/>

다음과 같이 입력합니다.

<input type="text" className="form-control" placeholder="Search..." />

또는 반드시 가지고 있어야 한다고 생각되는 경우 다음과 같이 설정합니다.defaultValue:

<input type="text" className="form-control" placeholder="Search..." defaultValue="Search..."/>

문서: https://facebook.github.io/react/docs/uncontrolled-components.html#default-values

이 입력 필드에서 사용자로부터 입력 값을 가져오지 않으면 defaultValue를 설정하여 이 필드를 읽기 전용으로 만들어야 합니다.

값을 설정하고 사용자의 조작을 필요로 하는 경우.초기값 상태를 업데이트하려면 onChange 이벤트를 전송해야 합니다.이것은 앵글 서포트로서의 쌍방향 바인딩과 같습니다.

state = {
   keyword: 'test' 
} 

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

render() {
  return (
      <input 
         type="text" 
         placeholder="Search..."
         value={this.state.keyword} 
         onChange={(event)=>this.inputChangedHandler(event)} />
   );
} 

입력에 값 속성을 설정하고 업데이트하기 위한 핸들러를 제공하지 않기 때문에 경고가 표시됩니다.이 경고는 다음 두 가지 방법이 있습니다.

1. 참조를 사용하여 DOM에서 양식 값을 가져올 수 있습니다.

   https://reactjs.org/docs/uncontrolled-components.html

2. set onChange 핸들러 함수를 지정합니다.

이거 드셔보세요.

const [email, SetEmail] = useState("");

<Form.Control
    onChange={e => SetEmail(e.target.value)}
    type="email"
    name="email"
    value={email || ""}
/>

대부분의 경우 제출된 유형을 확인해야 합니다.유형을 지정하지 않으면 오류가 발생합니다.

<form onSubmit={handleSubmit} className='grid grid-cols-1 gap-3 justify-items- 
      center mt-3'>
     <input type="text" disabled value={format(date, 'PP')} 
                     className="input input-bordered w-full max-w-xs" />
     <select name='slot' class="select select-bordered w-full max- 
     w-xs">
        {
            slots.map(slot => <option value={slot}>{slot} 
            </option>)
        }
     </select>
     <input type="text" name='name' placeholder="Your Name" 
     className="input input-bordered w-full max-w-xs" />
     <input type="email" name='email' placeholder="Email Address" 
     className="input input-bordered w-full max-w-xs" />
     <input type="text" name='phone' placeholder="Phone Number" 
     className="input input-bordered w-full max-w-xs" />
     <input type="submit" value="Submit" className="btn btn- 
     secondary text-white font-semibold w-full max-w-xs" />
</form>

언급URL : https://stackoverflow.com/questions/43556212/failed-form-proptype-you-provided-a-value-prop-to-a-form-field-without-an-on