失败的formspropType：您为没有`onChange`处理程序的表单字段提供了`value`道具

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

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

我的AppFrame组件如下：

 class AppFrame extends Component { render() { return ( 
 
 
  ShireSoldiers  
 
 
  
 
 
 
  
 
 
 
 
 
 
Menu
 
 Dashboard 
 
 Fixtures 
 
 Players 
 
 
 
 
 
 {this.props.children} 
 
 
 ) } } export default AppFrame; 

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

Answer 1

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

对此：

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

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

Answer 2

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

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

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

2. 设置onChange处理函数。

Answer 3

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

如果您想设置值并涉及用户交互。 您应该发送onChange事件来更新初始值的状态。 这就像角度支撑的双向绑定。

 state = { keyword: 'test' } inputChangedHandler = (event) => { const updatedKeyword = event.target.value; // May be call for search result } render() { return ( this.inputChangedHandler(event)} /> ); }