asp.net의 코드 실행시 반응 구성 요소가 표시되지 않음

Question

반응이 처음이에요. 내가 mvc asp.net에서 reactjs와 간단한 양식을 만들었습니다. 그러나 실행시 반응 구성 요소가 웹 페이지에 표시되지 않습니다. 아래 코드를 공유했습니다. 내가 잘못한 곳을 알려주십시오. Index.cshtml

아래

namespace ReactForm.Controllers 
{ 
    public class HomeController : Controller 
    { 
     // GET: Home 
     public ActionResult Index() 
     { 
      return View(); 
     } 
     public JsonResult SaveContactData(ContactsData contact) 
     { 
      bool status = false; 
      string message = ""; 
      if(ModelState.IsValid) 
      { 
       using (MyDatabaseEntities dc = new MyDatabaseEntities()) 
       { 
        dc.ContactsDatas.Add(contact); 
        dc.SaveChanges(); 
        status = true; 
        message = "Thank you for submitting your query"; 
       } 
      } 
      else 
      { 
       status = false; 
       message = "Failed! Please try again"; 
      } 

       return new JsonResult { Data = new { status = status, message = message } }; 
     } 
    } 
} 

은 다음과 같습니다 :

다음

@{ 
    ViewBag.Title = "Create simple form with validation in React.JS"; 
} 

<div class="container"> 
    <h2>Create simple form with validation in React</h2> 
    <div id="contactFormArea">  
     </div> 
</div> 
@* LoaderOptimization css and js library *@ 


@* Bootstrap css*@ 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
@* jquery library*@ 
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
@* React library *@ 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
@* Our react component *@ 
<script src="~/scripts/ContactForm.js"></script> 
<style type="text/css"> 
    .form-control.error { 
    border-color:red; 
    background-color:#FFF6F6; 
    } 
    spam.error{ 
     color:red; 
    } 
    .servermessage{ 
     font-size:32px; 
     margin-top:20px; 
    } 
    </style> 

가 Reactjs 인 HomeController 아래

public partial class ContactsData 
    { 
     public int ContactID { get; set; } 
     public string Fullname { get; set; } 
     public string Email { get; set; } 
     public string Message { get; set; } 
    } 

된다 아래

내 데이터 모델 클래스입니다 코드 ContactForm.js :

01 23,662,441,148,195,222,671,822,653,210

Answer 1

당신의 ContactForm 모듈의 render() 방법은 중괄호 내부의 양식을 반환 :

는

return { 
    <form name="contactForm" noValidate onSubmit=[this.handleSubmit]> 
     <MyInput type={'text'} value={this.state.Fullname} label={'Full Name'} name={'Fullname'} htmlFor={'Fullname'} isrequired={true} onchange={this.onChangeFullname} onComponentMounted={this.register} messageRequired={'Fullname required'} /> 
     <MyInput type={'email'} value={this.state.Email} label={'Email'} name={'Email'} htmlFor={'Email'} isrequired={false} onchange={this.onChangeEmail} onComponentMounted={this.register} messageRequired={'Invalid Email'} /> 
     <MyInput type={'textarea'} value={this.state.Message} label={'Message'} name={'Message'} htmlFor={'Message'} isrequired={true} onchange={this.onChangeMessage} onComponentMounted={this.register} messageRequired={'Message required'} /> 
     <button type="submit" className="btn btn-default">submit</button> 
     <p className="servermessage">{this.state.ServerMessage}</p> 
    </form> 
}; 

은 괄호 안의 형태를 반환해야합니다

return (
    <form name="contactForm" noValidate onSubmit=[this.handleSubmit]> 
     <MyInput type={'text'} value={this.state.Fullname} label={'Full Name'} name={'Fullname'} htmlFor={'Fullname'} isrequired={true} onchange={this.onChangeFullname} onComponentMounted={this.register} messageRequired={'Fullname required'} /> 
     <MyInput type={'email'} value={this.state.Email} label={'Email'} name={'Email'} htmlFor={'Email'} isrequired={false} onchange={this.onChangeEmail} onComponentMounted={this.register} messageRequired={'Invalid Email'} /> 
     <MyInput type={'textarea'} value={this.state.Message} label={'Message'} name={'Message'} htmlFor={'Message'} isrequired={true} onchange={this.onChangeMessage} onComponentMounted={this.register} messageRequired={'Message required'} /> 
     <button type="submit" className="btn btn-default">submit</button> 
     <p className="servermessage">{this.state.ServerMessage}</p> 
    </form> 
);