Question

我正在尝试构建联系表单，并在访问值时出现此错误。我已经在控制台菜单中多次调试了它，但似乎我错过了一些或其他的东西，有人可以帮忙吗？

    var fieldValues = {
     name     : null,
    email    : null,
    contact  : null,
    age      : null

     }

     var Contactform = React.createClass({

      save(){
          var data = {
           name     : this.refs.name.getDOMNode().value,
           contact  : this.refs.contact.getDOMNode().value,
           email    : this.refs.email.getDOMNode().value,
           age      : this.refs.age.getDOMNode().value,
         }

      },

    render: function(){

        return(
                <div>
                <label>Name</label> 
                <form>
                <input type="text"
                       ref="name"
                       defaultValue={ this.props.fieldValues.name } />

                        <label>contact</label>
                        <input type="contact"
                               ref="contact"
                               defaultValue={ this.props.fieldValues.contact } />

                        <label>Email</label>
                        <input type="email"
                               ref="email"
                               defaultValue={ this.props.fieldValues.email } />

                        <label> age</label>
                        <input type="age"
                               ref="age"
                               defaultValue={ this.props.fieldValues.age}/>    

                               <button onClick={ this.save}>Save</button></form></div>
        )
    }

 })


     ReactDOM.render(<Contactform/>,
      document.getElementById('react-container'))
        </script>

Answer 1

<强>更改：

1。您忘记传递组件props中的Contactform，并且您正在通过以下方式访问该值：

this.props.fieldValues.name

由于它正在抛出错误，请使用此选项传递props：

<Contactform fieldValues={fieldValues}/>

2。而不是

this.refs.name.getDOMNode().value

使用它来访问值：

this.refs.name.value

由于this.refs.name引用了dom element，您可以通过this.refs.name.value访问该值。

检查工作示例：

var fieldValues = {
     name     : null,
    email    : null,
    contact  : null,
    age      : null

     }

     var Contactform = React.createClass({

      save(e){
        e.preventDefault();
          var data = {
           name     : this.refs.name.value,
           contact  : this.refs.contact.value,
           email    : this.refs.email.value,
           age      : this.refs.age.value,
         }
         console.log(data)
      },

    render: function(){

        return(
                <div>
                <label>Name</label> 
                <form>
                <input type="text"
                       ref="name"
                       defaultValue={ this.props.fieldValues.name } />

                        <label>contact</label>
                        <input type="contact"
                               ref="contact"
                               defaultValue={ this.props.fieldValues.contact } />

                        <label>Email</label>
                        <input type="email"
                               ref="email"
                               defaultValue={ this.props.fieldValues.email } />

                        <label> age</label>
                        <input type="age"
                               ref="age"
                               defaultValue={ this.props.fieldValues.age}/>    

                               <button onClick={ this.save}>Save</button></form></div>
        )
    }

 })


     ReactDOM.render(<Contactform fieldValues={fieldValues}/>,
      document.getElementById('react-container'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='react-container'/>

Answer 2

您应该将fieldValues变量react组件作为属性传递。

未捕获的TypeError：无法在Constructor.render

2 个答案: