Uncaught TypeError：Constructor.renderで未定義のプロパティ 'name'を読み取ることができません。

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.あなたはコンポーネントContactformでpropsを渡すのを忘れて、あなたがして値をアクセスしている：ので、それが投げされていることの

this.props.fieldValues.name 

エラー、これを使用して渡しますprops：

<Contactform fieldValues={fieldValues}/> 

代わりの

this.refs.name.getDOMNode().value

値にアクセスするために使用この：this.refs.nameはdom elementを参照してください、そして、あなたがして、その値にアクセスすることができますので

this.refs.name.value 

をthis.refs.name.value。

作業例を確認：あなたはFieldValuesプロパティ変数を渡す必要があり

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

は、プロパティとしてコンポーネントを反応させます。