Javascript 表单 propType 失败：您向没有 `onChange` 处理程序的表单字段提供了 `value` 属性

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

提问by Nick Pocock

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

当我加载我的反应应用程序时，我在控制台中收到此错误。

Warning: Failed form propType: You provided a valueprop to a form field without an onChangehandler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChangeor readOnly. Check the render method of AppFrame.

警告：表单 propType 失败：您在value没有onChange处理程序的情况下为表单字段提供了一个道具。这将呈现只读字段。如果字段应该是可变的，请使用defaultValue. 否则，设置onChange或readOnly。检查 的渲染方法 AppFrame。

My AppFrame component is below:

我的 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;

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.

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

回答by jolvera

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:

或者，如果您认为必须拥有它，请将其设置为defaultValue：

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

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

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

回答by reza.cse08

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.

如果您不通过此输入字段从用户处获取输入值，则需要通过设置defaultValue使此字段只读。

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

如果您想设置值并涉及用户交互。您应该发送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)} />
   );
} 

回答by Shimon Itkin

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:

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

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

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

2. set onChangehandler function.

1. 您可以使用ref从 DOM 获取表单值。

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

2. 设置onChange处理函数。