Question

我正在尝试在反应中实施一个推特框。
但是我收到了一个错误。未捕获的TypeError：超级表达式必须为null或函数，而不是未定义的
你能告诉我如何解决它。
在下面提供。

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')
);

Answer 1

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

资本C

React.Component

您添加了组件Hello，但您的组件名为TwitterBox
您在引号内引用this.state.enteredTextBoxvalue（将其作为字符串），但应在括号中引用。

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

Answer 2

的变化：

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值。

检查工作示例：

＆＃13;

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')
);

＆＃13;

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

＆＃13;

文本框未捕获的TypeError：超级表达式必须为null或函数，而不是未定义

2 个答案: