• Я пытаюсь внедрить твиттерную коробку в реакцию.
  • но я получаю ошибку. Uncaught TypeError: Супер-выражение должно быть либо нулевым, либо функцией, а не неопределенным
  • ребята, вы можете сказать мне, как это исправить.
  • предоставляя это ниже.

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')
);
-1
user7805277 27 Май 2017 в 19:25

2 ответа

Лучший ответ

Изменения:

1. Опечатка в React.component, она должна быть React.Component.

2. Динамическое значение должно быть внутри {}, но вы определили его как строку: value = "this.state.enteredTextBoxvalue" оно должно быть value = {this.state.enteredTextBoxvalue}

3. Вы определили имя компонента как TwitterBox, но отображаете Hello:

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

4. Вы используете контролируемый компонент (означает определение свойства value textarea), поэтому также определите функцию 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'/>
1
Mayank Shukla 27 Май 2017 в 16:53

У вас было три ошибки в вашем коде. См. https://jsfiddle.net/q7yvmsa3/7/ для (своего рода) результата работы.

  1. Это React.Component с большой буквы C
  2. Вы добавили компонент Hello, хотя ваш компонент называется TwitterBox
  3. Вы обращаетесь к this.state.enteredTextBoxvalue внутри кавычек (делая это как строка), но это должно быть указано в скобках.

И еще примечание: вам нужно обновлять состояние введенного значения TextBox при каждом нажатии клавиши, чтобы синхронизировать текстовую область.

1
Samuli Hakoniemi 27 Май 2017 в 16:45