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

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.

172830 次浏览
小开

你在你的搜索输入中直接输入了一个值，我看不出有什么好处，因为你已经有了一个占位符。您可以从以下部分删除值:

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

to this:

<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

小开

出现该警告是因为您在输入上设置了 value 属性，并且没有提供任何更新该属性的处理程序。有两种方法可以做到这一点:

  1. 可以使用 裁判从 DOM 获取表单值。

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

  2. 设置 改变处理函数。

小开

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 默认值.

如果要设置值并涉及用户交互，则使用。您应该发送 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)} />
);
}
小开
最佳答案

试试这个,

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>

提交答案