Javascript 未捕获类型错误：无法读取属性'；名称'；在Constructor.render处未定义的

我正在尝试构建一个联系人表单，在访问这些值时出现此错误。我已经在控制台菜单中调试了好几次，但似乎我遗漏了一些东西，有人能帮忙吗

    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>

var字段值={
名称：空，
电子邮件：空，
联系人：空，
年龄：零
}
var Contactform=React.createClass({
保存（）{
风险值数据={
名称：this.refs.name.getDOMNode（）.value，
contact:this.refs.contact.getDOMNode（）.value，
email:this.refs.email.getDOMNode（）.value，
年龄：this.refs.age.getDOMNode（）值，
}
},
render:function（）{
返回(
名称
接触
电子邮件
年龄
拯救
)
}
})
ReactDOM.render（，
document.getElementById（'react-container'））

更改：

1。您忘记传递组件

联系人表单中的
道具
，您通过以下方式访问该值：

this.props.fieldValues.name 

因为它抛出了错误，所以使用它来传递
道具
：

<Contactform fieldValues={fieldValues}/>

因为
this.refs.name
引用了
dom元素
，您可以通过
this.refs.name.value
访问该元素的值

检查工作示例：


var字段值={
名称：空，
电子邮件：空，
联系人：空，
年龄：零
}
var Contactform=React.createClass({
保存（e）{
e、 预防默认值（）；
风险值数据={
名称：this.refs.name.value，
联系人：this.refs.contact.value，
电子邮件：this.refs.email.value，
年龄：this.refs.age.value，
}
console.log（数据）
},
render:function（）{
返回(
名称
接触
电子邮件
年龄
拯救
)
}
})
ReactDOM.render（，
document.getElementById（'react-container'））

更改：

1。您忘记传递组件
联系人表单中的
道具
，您通过以下方式访问该值：

this.props.fieldValues.name 

因为它抛出了错误，所以使用它来传递
道具
：

<Contactform fieldValues={fieldValues}/>

因为
this.refs.name
引用了
dom元素
，您可以通过
this.refs.name.value
访问该元素的值

检查工作示例：


var字段值={
名称：空，
电子邮件：空，
联系人：空，
年龄：零
}
var Contactform=React.createClass({
保存（e）{
e、 预防默认值（）；
风险值数据={
名称：this.refs.name.value，
联系人：this.refs.contact.value，
电子邮件：this.refs.email.value，
年龄：this.refs.age.value，
}
console.log（数据）
},
render:function（）{
返回(
名称
接触
电子邮件
年龄
拯救
)
}
})
ReactDOM.render（，
document.getElementById（'react-container'））


您应该将fieldValues变量反应组件作为属性传递。
您应该将fieldValues变量反应组件作为属性传递。
感谢您让我知道这一点。感谢您让我知道这一点。