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

IT技术 javascript jquery forms reactjs
2021-05-20 01:25:57

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

警告：表单 propType 失败：您在value没有onChange处理程序的情况下为表单字段提供了一个props。这将呈现只读字段。如果字段应该是可变的，请使用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;

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

4个回答

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

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

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

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

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

  2. 设置onChange处理函数。

你不应该直接提供value相反，你可以提供defaultValue

<input type="text" className="form-control" placeholder="Search..."
                                   defaultValue="Search..."/>
其它你可能感兴趣的问题
上一篇使用挤压倍增器是不是像作弊一样？ 下一篇在 JSX 中，如何将 className 设置为 string + {prop}