Question

我正在使用ReactJS（最新版本16.8.6）我有两个文件：

“ context.js”文件，其中包含联系人的静态列表和导出的Provider。
“ addcontact.js”文件，该文件是将联系人添加到上下文中此列表的一种形式。

我只想验证函数是否被调用，但是当我填写输入并提交表格时，我遇到了此异常 addcontact is not a function at AddContact.onsubmit

而不是
<form onSubmit={this.onsubmit.bind(this,addcontact)}>
我在这样的输入中添加onClick事件
<input type="submit" value="add contact" onClick={this.onsubmit.bind(this,addcontact)} />

context.js

import React, { Component } from 'react' 

const Context = React.createContext();

 export  class Provider extends Component {


state= { 

    contacts : [ {  
        id : 1,
        name : ' john ' ,
        email : ' jhon@gmail.com',
        phone : ' 1111111111 '
     },
     {  
      id : 2,
      name : ' peter ' ,
      email : ' peter@gmail.com',
      phone : ' 2222222222 '
   },
   {  
      id : 3,
      name : ' lisa ' ,
      email : ' lisa@gmail.com',
      phone : ' 3333333333 '

   }   ]    ,

   deletecontact : id => this.setState({
     contacts :  this.state.contacts.filter( c => 
        c.id !== id  )

   }, 
 )
,
addcontact : () => {

    console.log('success'); }  }


render() {

    return (

    <Context.Provider value={this.state} >
        {this.props.children}
    </Context.Provider> 
    )
}

 }
 export const Consumer = Context.Consumer;

AddContact.js

 import React, { Component } from 'react'

 import {Consumer} from '../../context'

 import uuid from 'uuid'



 export class AddContact extends Component {

 state = {
 name :'',
 email:'',
 phone:''
 }

 changecontact = (e) => {

 this.setState({ [e.target.name] : e.target.value } );

 }


 onsubmit = (addcontact,e) => {

 e.preventDefault();

 const {name ,email,phone } = this.state;



 addcontact()

 }


render() {

const {name , email , phone } = this.state;

    return (

 <Consumer>


 {value => {

 const addcontact = value;

 return (

 <div className="card mb-3">

 <div className="card-header">

 Add Contact

 <div className="card-body">

 <form onSubmit={this.onsubmit.bind(this,addcontact)}>

 <div className="form-group">

 <label htmlFor="name">Name</label>

 <input type="text"
        name="name"
        className="form-control form-control-lg"
        placeholder="Enter Name ..." 
        value={name}
        onChange={this.changecontact}
        >


 </input>

 </div>


 <div className="form-group">

 <label htmlFor="email">Email</label>

 <input type="email" 
 name="email"
 className="form-control form-control-lg"
 placeholder="Enter Email ..."
 value={email} 
 onChange={this.changecontact} >


 </input>

 </div>


<div className="form-group">

<label htmlFor="phone">Phone</label>

<input type="text"

 name="phone"
 className="form-control form-control-lg"
 placeholder="Enter Phone ..."
 value={phone}
 onChange={this.changecontact} >


 </input>

 </div>  
 <input type="submit" value="Add Contact" className="btn btn-block btn-          
 light" />

 </form>

 </div>


 </div> 


 </div>

 )
 }}




 </Consumer>


  )


      }

 }

 `

Answer 1

我认为您在函数中的this方法之前缺少addcontact。

<form onSubmit={this.onsubmit.bind(this, this.addcontact)}>

当我在上下文中调用函数时，我得到的“ namefunction”不是函数

1 个答案: