反応で状態を使用してヌルのプロパティを読み取ることができません

Question

私はコードが意味を理解し、ユーザーがファイルをアップロードしたときにファイル名を表示しますが、ファイル名の定義されていないプロパティを読み取れません。どうして？私はすでにfilenameをnullに設定していませんか？

export default class fileUpload extends Component { 
    constructor(props) { 
     super(props); 

     React.defaultProps = { 
      filename: null 
     } 
    } 

    handleOnChange = (e) => { 
     this.setState({filename: e.target.files[0].name}) 
    } 

    render() { 
     return(
      <div> 
       <input type="file" onChange={this.handleOnChange}/> 
       {this.state.filename && <span className="filename-placeholder">{this.state.filename}</span>} 
      </div> 
     ) 
    } 
} 

Answer 1

は、この行を含めて、それが動作します：

constructor(props) { 
    super(props); 
    this.state = {}; //line 
    React.defaultProps = { 
     filename: null 
    } 
} 

あなたは、コンストラクタでstateを定義する必要があります。

いくつかの提案：

1.defaultPropsはpropsのデフォルト値ではなく、state変数のデフォルト値を設定するために使用されます。 state変数を使用しているため、defaultPropsはここでは必要ありません。例を確認してください。 （大文字で始まっ）

2.あなたが代わりにその使用FileUploadの、（小文字で始まっ）fileUploadとしてクラス名を定義

作業例を確認：

class FileUpload extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
      filename: null 
 
     } 
 
    } 
 

 
    handleOnChange = (e) => { 
 
     this.setState({filename: e.target.files[0].name}) 
 
    } 
 

 
    render() { 
 
     return(
 
      <div> 
 
       <input type="file" onChange={this.handleOnChange}/> 
 
       {this.state.filename && <span className="filename-placeholder">{this.state.filename}</span>} 
 
      </div> 
 
     ) 
 
    } 
 
} 
 

 
ReactDOM.render(<FileUpload/>, document.getElementById('app'))

<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='app'/>

を