Question

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

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

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

Answer 1

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

 Private Function SimplifyModel2(ByVal listOri As List(Of Mesh3D)) As List(Of Mesh3D)  
    Dim listNew As New List(Of Mesh3D)(listOri)
    Dim indexOut, indexIn, indexInner, PercentProgressCurrent As Integer
    Dim currentMeshOutter, currentMeshInner As Mesh3D
    Dim isExitForCalled As Boolean = False

    totInnerLoops = totInnerLoops + 1   ' increment total number of inner loops

    For indexOut = 0 To (listOri.Count - 1)
        currentMeshOutter = listOri(indexOut)

        indexInner = indexOut + 1
        For indexIn = indexInner To (listOri.Count - indexInner)
            currentMeshInner = listOri(indexIn)

            If Is3DOverlap(currentMeshInner, currentMeshOutter) = True Then
                currentMeshOutter.CombineMerge(currentMeshInner)
                listNew.Remove(currentMeshInner)
                listNew.Remove(currentMeshOutter)
                listNew.Insert(0, currentMeshOutter)

                listNew = SimplifyModel2(listNew) ' recursively call the function
                isExitForCalled = True
                Exit For
            End If
        Next

        If isExitForCalled = True Then
            Exit For
        End If
    Next

    indLoopExit = indLoopExit + 1

    Return listNew
End Function

到此：

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

或者，如果您认为必须拥有它，请将其设置为<input type="text" className="form-control" placeholder="Search..." />：

defaultValue

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

Answer 2

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

您可以使用参考从DOM中获取表单值。

https://reactjs.org/docs/uncontrolled-components.html
设置 onChange 处理函数。

Answer 3

您不应直接提供价值相反，您可以提供 defaultValue

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

失败的形式propType：你为表单字段提供了一个`value`道具，没有`onChange`处理程序

3 个答案: