Question

当文本框中的字符大于3时，我需要在texbox中添加边框。
所以我添加了className wholeContainer
不确定何时添加state和setState。我是否需要在css
你能告诉我如何解决它。
在下面提供。

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：

%%

的CSS：

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

HTML：

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

当文本框中的字符大于3时，我需要添加边框

2 个答案: