2017-02-21 5 views
1

反応成分と小道具に問題があります。以下は例外です。 私は間違っていますか?React ES6 Super Expression

キャッチされない例外TypeError:

class Component extends React.component { 

あなたはReact.componentに小さなcを使用:スーパー式は

class Component extends React.component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     name: '' 
    } 
    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(event) { 
    this.setState({ 
     name: event.target.value 
    }); 
    } 

    render() { 
    return (
     <div> 
     <input type="text" onChange={this.handleChange} /> 
     <p>{this.state.name}</p> 
     </div> 
    ) 
    } 
}; 

ReactDOM.render(
    <Component />, 
    document.getElementById('reactContainer') 
) 

Codepen link

答えて

3

問題は、この行にある未定義ない、nullまたは機能のいずれかでなければなりませんその代わりにC

class Component extends React.Component { 

チェック作業コード:

class Component extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     name: '' 
 
    } 
 
    this.handleChange = this.handleChange.bind(this); 
 
    } 
 

 
    handleChange(event) { 
 
    this.setState({ 
 
     name: event.target.value 
 
    }); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <input type="text" onChange={this.handleChange} /> 
 
     <p>{this.state.name}</p> 
 
     </div> 
 
    ) 
 
    } 
 
}; 
 

 
ReactDOM.render(
 
    <Component />, 
 
    document.getElementById('reactContainer') 
 
)
<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='reactContainer'></div>

関連する問題