代码大概是这个样子的: 其中还是有一点小问题,明天再看吧~
import './index.html';
import './index.less';
import ReactDOM from 'react-dom';
import React from 'react';
import { Form,Input } from 'antd';
const FormItem = Form.Item;
var MyComponent = React.createClass({
getInitialState: function(){
return ({a : false},{value : "您还可以输入255个字"});
},
handleFocus: function() {
this.setState({a :true});
},
loseFocus: function(){
this.setState({a:false});
},
handleChange: function(event){
this.setState({value:event.target.value});
},
render: function() {
var r=this.state.a ? 5:1;
var value=this.state.value;
var l=255-value.length;
return (
<Form horizontal>
<FormItem label="备注:">
<Input type="textarea" ref="myTextInput" rows={r} placeholder="您可以输入255个字" onFocus={this.handleFocus} onBlur={this.loseFocus} onChange={this.handleChange}/>
</FormItem>
<p>您还可以输入{l}个字</p>
</Form>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);