Javascript React Failed prop type:没有onChange处理程序的值

这是我的

表单

组件：

Form.jsx

这是控制台显示的错误：

index.js:1446 Warning: Failed prop type: 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`.
    in input (at Form.jsx:72)
    in div (at Form.jsx:71)
    in form (at Form.jsx:69)
    in div (at Form.jsx:61)
    in Form (at App.jsx:66)
    in Route (at App.jsx:65)
    in Switch (at App.jsx:58)
    in div (at App.jsx:56)
    in div (at App.jsx:55)
    in div (at App.jsx:54)
    in section (at App.jsx:53)
    in div (at App.jsx:48)
    in App (at src/index.js:9)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:8)

但是我不明白，因为在上面的代码中，

正在处理表单更改，如下所示：

onChange={this.props.handleFormChange}

---

那么我错过了什么？表单甚至不接受输入。

这是因为您没有将任何名为

handleFormChange

的道具从

App.jsx

传递到表单组件

相反，它是在您自己的

表单中

组件中

---

因此，只需尝试一下这个

onChange={this.handleFormChange}

它，因为您没有将任何名为

handleFormChange

的属性从

App.jsx

传递到表单组件

相反，它是在您自己的

表单中

组件中

---

因此，只要尝试一下这个

onChange={this.handleFormChange}

您就从根本上误解了React组件中的props概念。我将尝试用你的应用程序的更简化版本来解释它。让我们以表单为例

class Form extends Component {

  handleFormChange(){
    console.log("This is the form change function inside -Form-");
  }

  render(){
    return(
    <div>
     <input
      name="email"
      type="text"
      value={this.state.email}
      onChange={this.handleFormChange} // Focus point 1 - Calls local function
    />
     <input
      name="username"
      type="text"
      value={this.state.username}
      onChange={this.props.handleFormChange} // Focus point 2 - Calls function passed down via props
    />  
   </div>

    );
  }


}


class App extends Component {

  handleFormChange(){
      console.log("This is the form change function inside -App-");
  }

  render(){
    return <Form handleFormChange={this.handleFormChange} />
  }

}

类表单扩展组件{
handleFormChange（）{
log（“这是-form-”中的表单更改函数）；
}
render（）{
返回(
);
}
}
类应用程序扩展组件{
handleFormChange（）{
log（“这是-App-”中的表单更改函数）；
}
render（）{
回来
}
}

如您所见，应用程序将呈现表单组件。请看焦点1和2。在第一个焦点中，它试图访问本地“handleFormChange”函数。第二个函数尝试调用父函数通过props提供的任何函数

因此，发生的情况是，您告诉“表单”组件访问handleFormChange函数，该函数应该由父级作为“prop”提供，即this.props.handleFormChange。因此，当安装组件时，React会尝试将this.props.handleFormChange绑定到输入的onChange事件

但在您的实例中，没有提供组件中的“handleFormChange”属性。因此，此.props.handleFormChange将未定义，从而导致该警告

---

因此，要连接表单组件中的任何处理程序，它们不应与“this.props”链接。初始化组件时，父级应提供通过props访问的任何处理程序。

您从根本上误解了React组件中的props概念。我将尝试用你的应用程序的更简化版本来解释它。让我们以表单为例

class Form extends Component {

  handleFormChange(){
    console.log("This is the form change function inside -Form-");
  }

  render(){
    return(
    <div>
     <input
      name="email"
      type="text"
      value={this.state.email}
      onChange={this.handleFormChange} // Focus point 1 - Calls local function
    />
     <input
      name="username"
      type="text"
      value={this.state.username}
      onChange={this.props.handleFormChange} // Focus point 2 - Calls function passed down via props
    />  
   </div>

    );
  }


}


class App extends Component {

  handleFormChange(){
      console.log("This is the form change function inside -App-");
  }

  render(){
    return <Form handleFormChange={this.handleFormChange} />
  }

}

类表单扩展组件{
handleFormChange（）{
log（“这是-form-”中的表单更改函数）；
}
render（）{
返回(
);
}
}
类应用程序扩展组件{
handleFormChange（）{
log（“这是-App-”中的表单更改函数）；
}
render（）{
回来
}
}

如您所见，应用程序将呈现表单组件。请看焦点1和2。在第一个焦点中，它试图访问本地“handleFormChange”函数。第二个函数尝试调用父函数通过props提供的任何函数

因此，发生的情况是，您告诉“表单”组件访问handleFormChange函数，该函数应该由父级作为“prop”提供，即this.props.handleFormChange。因此，当安装组件时，React会尝试将this.props.handleFormChange绑定到输入的onChange事件

但在您的实例中，没有提供组件中的“handleFormChange”属性。因此，此.props.handleFormChange将未定义，从而导致该警告

---

因此，要连接表单组件中的任何处理程序，它们不应与“this.props”链接。初始化组件时，父级应提供通过props访问的任何处理程序。

这是因为

handleFormChange

不是prop；它位于

Form.jsx

中，应该是：

onChange={this.handleFormChange}

那么所有的道具都应该从Form.jsx中移除吗？检查你的代码。如果方法位于

Form.jsx

中，则它不是一个道具，而是一个本地方法。因为道具是子组件从父组件获取数据的一种方式，这是因为

handleFormChange

不是道具；它位于

Form.jsx

中，应该是：

onChange={this.handleFormChange}

那么所有的道具都应该从Form.jsx中移除吗？检查你的代码。如果一个方法位于

Form.jsx

中，它不是一个道具，而是一个本地方法。因为道具是子组件从父组件获取数据的一种方式

class Form extends Component {

  handleFormChange(){
    console.log("This is the form change function inside -Form-");
  }

  render(){
    return(
    <div>
     <input
      name="email"
      type="text"
      value={this.state.email}
      onChange={this.handleFormChange} // Focus point 1 - Calls local function
    />
     <input
      name="username"
      type="text"
      value={this.state.username}
      onChange={this.props.handleFormChange} // Focus point 2 - Calls function passed down via props
    />  
   </div>

    );
  }


}


class App extends Component {

  handleFormChange(){
      console.log("This is the form change function inside -App-");
  }

  render(){
    return <Form handleFormChange={this.handleFormChange} />
  }

}