javascript - 在 asp.net 中运行代码时，React 组件未显示

Question

我是新来的 react 。我在 mvc asp.net 中使用reactjs 创建了一个简单的表单。但在执行时， react 组件没有显示在网页中。我在下面分享了我的代码。请让我知道我哪里出错了。

下面是我的数据的模型类:

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

下面是 HomeController:

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 } };
        }
    }
}

下面是 Index.cshtml:

@{
    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代码ContactForm.js:

 //React component for input component
var MyInput = React.createClass({
    //onchange event
    handleChange: function (e) {
        this.props.onChange(e.target.value);
        var isValidField = this.isValid(e.target);
    },
    //validation function
    isValid: function (input) {
        //check required field
        if (input.getAttribute('required') != null && input.value === "") {
            input.classList.add('error'); //add class error
            input.nextSibling.textContent = this.props.messageRequired; //show error message
            return false;
        }
        else {
            input.classList.remove('error'); 
            input.nextSibling.textContent = "";
        }
        //check data type 
        if (input.getAttribute('type') == "email" && input.value != "") {
            if (!this.validateEmail(input.value)) {
                input.classList.add('error');
                input.nextSibling.textContent = this.props.messageEmail;
            }
            else {
                input.classList.remove('error');
                input.nextSibling.textContent = "";
            }
        }
        return true;

    },
    //email validation function
    validateEmail: function (value) {
        var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(value);
    },
    componentDidMount: function () {
        if (this.props.onComponentMounted) {
            this.props.onComponentMounted(this); //register this input in the form
        }
    },
    //render
    render: function () {
        var inputField;
        if (this.props.type == 'textarea') {
            inputField = <textarea value={this.props.value} ref={this.props.name} name={this.props.name} className='form-control' required={this.props.isrequired} onChange={this.handleChange}/>
            }
        else{
            inputField = <input type={this.props.type} ref={this.props.name} name={this.props.name} className='form-control' required={this.props.isrequired} onChange={this.handleChange}/>
            }
        return (
            <div className="form-group">
                <lable htmlFor={this.props.htmlFor}>{this.props.lable}</label>
                {inputField}
                <span className="error"></span>
            </div>
            );
    }

});

//React component for generate form

var ContactForm = React.createClass({
    //get initial statement
    getInitialState : function(){
        return{
            Fullname : '',
            Email : '',
            Message : '',
            Fields : [],
            ServerMessage : ''
        }
    },
    // submit function
    handleSubmit : function(e){
        e.preventDefault();
        //validate entire form here
        var validForm = true;
        this.state.Fields.forEach(function(field){
            if(typeof field.isValid === "function"){
                var validField = field.isValid(field.refs[field.props.name]);
                validForm = validForm && validField;
            }
        });
        //after validation complete post to server
        if(validForm){
            var d={
                Fullname: this.state.Fullname,
                Email : this.state.Email,
                Message : this.state.Message
            }
            $.ajax({
                type :"POST",
                url : this.props.urlPost,
                data: d,
                success : function(data){
                    //will clear form here
                    this.setState({
                        Fullname : '',
                        Email : '',
                        Message: '',
                        ServerMessage: data.message
                    });

                }.bind(this),
                error : function(e){
                    console.log(e);
                    alert('Error! Please try again');
                }
            });
        }
    },
    //handle change full name
    onChangeFullname : function(value){
        this.setState({
            Fullname : value
        });
    },
    //handle change email
    onChangeEmail : function(value){
        this.setState({
            Email : value
        });
    },
    //handle change message
    onChangeMessage : function(value){
        this.setState({
            Message : value
        });
    },
    //register input controls
    register : function(field){
        var s = this.state.Fields;
        s.push(field);
        this.setState({
            Fields : s
        });
    },
    //render
    render : function(){
        //Render 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>
};
    }
});

//Render react component into the page
                ReactDOM.render(<ContactForm urlPost="/home/SaveContactData" />, document.getElementById('contactFormArea'));

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>
);