文本框 Uncaught TypeError: Super expression must be null or a function, not undefined答案

【问题标题】：text box Uncaught TypeError: Super expression must either be null or a function, not undefined文本框 Uncaught TypeError: Super expression must be null or a function, not undefined
【发布时间】：2017-05-27 16:25:53
【问题描述】：

我正在尝试在 react 中实现一个 twitter 框。
但我收到错误消息。未捕获的类型错误：超级表达式必须为 null 或函数，而不是未定义
你们能告诉我如何解决它吗？
在下面提供。

https://jsfiddle.net/q7yvmsa3/4/

class TwitterBox extends React.component {

    constructor(props) {
        super(props);
        this.state = { enteredTextBoxvalue : '' };

    }

    // var textBoxValue = textbox.value();

    // var totalCount = textBoxValue.count();

    // if (totalCount > 140) {

    //  div.addCSS{ border: 1px solid red}

    // }


    render() {
        return (<div>Hello {this.props.name}
                        <textarea value = "this.state.enteredTextBoxvalue">
                            there should be only 140 characters
                    </textarea>
        </div>);
    }



}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

【问题讨论】：

你在 React.component 有错字（应该是大写 C）
您的代码中有三个错误。我将它们固定在：jsfiddle.net/q7yvmsa3/7
@zvona 如果你能解释一下你修复了什么，那就太好了......这样以后我会自己做
@texirv 请接受这些答案之一，勾选左侧的绿色复选标记，因为这里的问题已经解决。
@FélixGagnon-Grenier 为什么它是负面的？？

标签： javascript html css reactjs redux

【解决方案1】：

变化：

1.React.component的错字，应该是React.Component。

2. 动态值必须在{} 内，但您将其定义为字符串：value = "this.state.enteredTextBoxvalue" 它应该是value = {this.state.enteredTextBoxvalue}

3.您将组件的名称定义为TwitterBox，但渲染Hello：

ReactDOM.render(<Hello/>,....)

4. 你使用的是controlled component（意思是定义了textarea的value属性），所以还要定义一个onChange函数，并在里面更新state变量的值那个。

5. 不要定义textarea 的子代，如果你想要一些默认值，那么用它来初始化state 的值。

检查工作示例：

class TwitterBox extends React.Component {
    
    constructor(props) {
      super(props);
      this.state = { enteredTextBoxvalue : '' };
      this.change = this.change.bind(this);
    }
    
    change(e){
       this.setState({enteredTextBoxvalue: e.target.value}); 
    }
    
    render() {
       return (
          <div>
              Hello {this.props.name}
              <textarea value={this.state.enteredTextBoxvalue} onChange={this.change}/>
          </div>
       )
    }
}

ReactDOM.render(
   <TwitterBox name='hello'/>,       
   document.getElementById('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='container'/>

【讨论】：

你好，你能告诉我为什么我们在变化中传递 e，没有那个我们不能得到文本框的值....有这个问题很多次...但无法找到它:(
e 只不过是一个事件对象，我们没有传递它，它将在 change 方法中自动传递，它将包含有关该元素的所有信息，请查看 MDN 文档了解更多详细信息：@ 987654322@
嘿，有没有图表表示...令人困惑:(

【解决方案2】：

您的代码中有三个错误。请参阅https://jsfiddle.net/q7yvmsa3/7/ 了解（某种）工作结果。

React.Component 大写 C
您添加了组件Hello，尽管您的组件名为TwitterBox
您在引号内引用this.state.enteredTextBoxvalue（使其成为字符串），但应在括号中引用。

另外注意：您需要在每次按键时更新 enteredTextBoxvalue 状态，以保持 textarea 同步。

【讨论】：