Javascript 当文本框中的字符超过3个时，我需要添加边框 当文本框中的字符超过3个时，我需要为文本框添加边框 所以我添加了类名wholeContainer 不确定何时添加状态和设置状态。我是否需要在css中为类名创建状态 你们能告诉我怎么修吗 在下面提供它

class TwitterBox扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={enteredTextBoxvalue:''}；
this.handleChange=this.handleChange.bind（this）；
}
手变（活动）{
this.setState（{enteredTextBoxvalue:event.target.value}）；
log（（event.target.value）.legth）；
如果（（event.target.value）.legth>3）{
this.setState（{className:wholeContainer}）；
//log（“长字符”）；
}
}
render（）{
return（Hello{this.props.name}
应该只有140个字符
);
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);

因此，请固定长度并在整个容器周围添加引号。这两个变化对我起了作用

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

另一方面，还有另一个不相关的错误，正如您所知： （不确定是否与小提琴有关，或与你的操作有关）

---

SyntaxError:expected expression，get'So，修复长度并在整个容器周围添加引号。这两个变化对我起了作用

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

另一方面，还有另一个不相关的错误，正如您所知：
（不确定是否与小提琴有关，或与你的操作有关）

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


JS:

HTML:

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


JS:

HTML:


if（（event.target.value）.legth>3）{=>length拼写不正确。这可能会导致错误，您可以检查控制台吗？
this.setState（{className:wholeContainer}）
是问题所在。除了Paul建议的拼写错误之外，其余代码都能正常工作。因此，没有定义完整的容器。@Almosta初学者嘿，但是文本框是红色的…只有在我单击外部时才可以。这是一个浏览器兼容性问题。在IE 11中进行了测试，但在Chrome中进行了测试，但没有。Chrome still起作用，但选定输入框的蓝色未被删除。您可以看到颜色的变化，这是因为应用了红色，但未覆盖“选定输入框样式”。以下是chrome.if（（event.target.value）.legth>3）中其行为的示例{=>length拼写不正确。这可能导致错误，您可以检查控制台吗？
this.setState（{className:wholeContainer}）
是问题所在。除了Paul建议的拼写错误之外，其余代码都能正常工作。因此，没有定义完整的容器。@Almosta初学者嘿，但是文本框是红色的…只有在我单击外部时才可以。这是一个浏览器兼容性问题。在IE 11中进行了测试，但在Chrome中进行了测试，但没有。Chrome still可以工作，但所选输入框的蓝色没有被删除。你可以看到颜色的变化，这是因为应用了红色，但“所选输入框样式”没有被覆盖。下面是它在chrome中的行为示例。更新了fiddle中的代码，但我仍然看不到文本框的边框颜色。在e fiddle.hey但是文本框是红色的…只有当我点击OutsideInterest…我不知道，我只输入了框中显示的四个字符（注意光标仍然在文本区域），并且在输入了“f”后边框为我变红了？我刚刚再试了一次，行为是一样的。你在使用什么浏览器？（我正在使用FF）我正在使用Chrome更新小提琴中的代码，但我仍然看不到文本框的边框颜色。添加的图片显示了我在小提琴中的外观。嘿，但是文本框是红色的…只有当我单击“Outside有趣…”我不知道，我只键入了框中显示的四个字符（请注意，光标仍在文本区域中），在键入“f”后，边框将变为红色？我刚刚重试，行为相同。您使用的浏览器是什么？（我使用的是FF）我正在使用chromeThanks获取额外的跨浏览器信息。很高兴我问了哪个浏览器，因为我不知道为什么OP没有看到我所做的（通常假设使用相同的浏览器）.投票！我是否正确使用状态和设置状态…我是confused@texirv是的，问题是您没有将字符串传递给className，因此引用了整个容器。嘿，我需要使用组件生命周期的任何方法来获取额外的跨浏览器信息吗？很高兴我问了哪个浏览器，因为我不知道为什么OP没有看到我做了什么（通常假设使用相同的浏览器）。投票！我是否正确使用状态和设置状态…我是confused@texirv是的，问题是您没有将字符串传递给className，因此引用了整个Container。嘿，我需要使用组件生命周期的任何方法吗
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')
);

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

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