如何使用espen在Codepen中做出反应

Question

http://codepen.io/JessieZhou/pen/VPgMdP,这是在CodePen中使用React的演示,但是浏览器给出了错误"Uncaught ReferenceError:Component not defined".但是,如果我在第一行中从'react'"插入一行"import {Component}",则错误将是"Uncaught ReferenceError:require is not defined".是否有可能使用'class'导致此问题？

这是我的代码:

//import {Component} from 'react'
class MyInput extends Component{
   constructor(props){
     super(props);
     this.handleChange = this.handleChange.bind(this);
   }

   handleChange(e){
     this.props.update(e.target.value);
   }

   render(){
     return <input onChange={this.handleChange} type="text"/>
   }
}
ReactDOM.render(MyInput, document.getElementById('myinput'));

这是我在CodePen中的javascript设置:codepen中的 javascript设置

Answer 1

原因是Component是React的一部分，要访问您需要使用React.Component，如果您直接想使用Component，则首先从导入它react，如下所示：

import {Component} from 'react';

用这个：

class MyInput extends React.Component{
    constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e){
    console.log('e', e.target.vaule);
  }
  render(){
    return <input onChange={this.handleChange} type="text"/>
  }
}
ReactDOM.render(<MyInput/>, document.getElementById('myinput'));

检查码笔