当文本框中的字符超过 3 个时，我需要添加边框

Question

• 当文本框中的字符超过 3 个时，我需要为 texbox 添加边框。
• 所以我添加了 className wholeContainer
• 不确定何时添加 state 和 setState。我是否需要在 css 中为类名创建状态
• 你们能告诉我如何解决它吗？
• 在下面提供。

https://jsfiddle.net/q7yvmsa3/14/

class TwitterBox extends React.Component {

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

  handleChange(event) {
    this.setState({enteredTextBoxvalue: event.target.value});   
    console.log((event.target.value).legth);

    if((event.target.value).legth > 3) {    
        this.setState({className : wholeContainer});
        //console.log("long characters");
    }
  }

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


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

Answer 1

所以，固定长度并在 WholeContainer 周围添加引号。这两个变化对我很有效。

if((event.target.value).length > 3) {    
    this.setState({className : 'wholeContainer'});

顺便说一句，还有另一个不相关的错误，只是让您知道： （不确定它是否与小提琴有关，还是您处理的一部分）

SyntaxError: expected expression, got '<'
https://fiddle.jshell.net/_display/ Line 85
return (<div>Hello {this.props.name}
========^

小提琴图片：

Answer 2

好的，根据 Paul T 的回答，原始问题已修复，关于跨浏览器功能，您可以使用以下编辑：

https://jsfiddle.net/c9zv7yf5/

JS：

class TwitterBox extends React.Component {

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

    }

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

    if((event.target.value).length > 3) {

        this.setState({className : 'wholeContainer'});
        //console.log("long characters");

    }
  }




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

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

css:

.wholeContainer {
  outline: none !important;
  border:1px solid red;
}

HTML：

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>