javascript - Failed form propType: You provided a `value` prop to a form field without an `onChange` handler - Stack Overflow

admin管理员组

文章数量:1134600

When I load my react app I get this error in the console.

Warning: Failed form propType: 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. Check the render method of AppFrame.

My AppFrame component is below:

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;

I am struggling to work out what I am actually doing wrong here. The application starts up and works but I am trying to remove all console warning/errors.

When I load my react app I get this error in the console.

Warning: Failed form propType: 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. Check the render method of AppFrame.

My AppFrame component is below:

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;

I am struggling to work out what I am actually doing wrong here. The application starts up and works but I am trying to remove all console warning/errors.

• javascript
• jquery
• forms
• reactjs

Share Improve this question Follow asked Apr 22, 2017 at 6:50 N PN P 2,61977 gold badges3737 silver badges5757 bronze badges

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 192

You've put a value directly in your search input, I don't see the benefit there because you already have a placeholder. You could either remove the value from:

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

to this:

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

Or if you think you must have it, set it as defaultValue:

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

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

If you don't take the input value from the user by this input field, then you need to make this field read-only by setting the defaultValue.

In case if you want to set the value and involve user interaction. You should send onChange event to update the state of initial value. This is like two-way binding as angular support.

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

Try this,

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

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

the warning appears because you set a value attribute on the input and don't provide any handler to update it. there is two way to do so:

1. you can use a ref to get form values from the DOM.

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

2. set onChange handler function.

1.This is for use only functional component! **2.**you should replace value to defaultvalue or you should set onChangeHandler in inside of input field.

**3.**This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.

const [state,setState]=useState('');
return(<>
<input
type='text'
defaultValue={state}
onChange={(e)=>setState(e.target.value)}
placeholder='UserName'
name='username'
/>
</>);

Most of the time you have to see the submitted type. If you don't give a type you will face an error.

<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>

本文标签：