jquery 失败的表单propType：您为窗体字段提供了一个没有“onChange”处理程序的“value”属性

fhg3lkii 于 2023-03-17 发布在 jQuery

关注(0)|答案(6)|浏览(111)

当我加载我的react应用程序时，我在控制台中得到这个错误。
警告：表单失败propType：您为没有onChange处理程序的窗体字段提供了value属性。这将呈现只读字段。如果该字段应是可变的，请使用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;

我正在努力找出我在这里实际上做错了什么。应用程序启动并工作，但我正在尝试删除所有控制台警告/错误。

jquery

来源：https://stackoverflow.com/questions/43556212/failed-form-proptype-you-provided-a-value-prop-to-a-form-field-without-an-on

6条答案

按热度按时间

72qzrwbm1#

您直接在搜索输入中输入了一个值，我看不到这样做的好处，因为您已经有了占位符。您可以从以下位置删除该值：

<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

赞(0）回复(0）举报 2023-03-17

93ze6v8z2#

如果您不通过此输入字段从用户获取输入值，则需要通过设置defaultValue将此字段设置为只读。
如果您想设置值并涉及用户交互，您应该发送onChange事件来更新初始值的状态，这类似于双向绑定Angular 支持。

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

赞(0）回复(0）举报 2023-03-17

6rqinv9w3#

试试这个

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

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

赞(0）回复(0）举报 2023-03-17

pb3skfrl4#

出现警告是因为你在输入上设置了一个值属性并且没有提供任何处理程序来更新它.有两种方法可以做到这一点：
1.你可以使用一个ref从DOM中获取表单值。
https://reactjs.org/docs/uncontrolled-components.html
1.设置onChange处理程序函数。

赞(0）回复(0）举报 2023-03-17

f0ofjuux5#

大多数时候你必须看到提交的类型。如果你没有给予一个类型，你将面临一个错误。

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

赞(0）回复(0）举报 2023-03-17

e5njpo686#

1.这仅供功能组件使用！****2.您应该将value替换为defaultvalue，或者您应该在输入字段内设置onChangeHandler。

3.这将呈现只读字段。如果字段应可变，请使用defaultValue。否则，请设置**onChange**或readOnly。

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

赞(0）回复(0）举报 2023-03-17

我来回答

jquery 失败的表单propType：您为窗体字段提供了一个没有“onChange”处理程序的“value”属性

6条答案

相关问题

热门标签

最新问答