54 lines
1.7 KiB
Markdown
54 lines
1.7 KiB
Markdown
### LimitedTextarea
|
|
|
|
Renders a textarea component with a character limit.
|
|
|
|
Use the value of the `value` prop to determine the initial `state.content` and `state.characterCount` and the value of the `limit` props to determine the value of `state.limit`.
|
|
Create a method, `handleChange`, which trims the `event.target.value` data if necessary and uses `Component.prototype.setState` to update `state.content` and `state.characterCount`, and bind it to the component's context.
|
|
In the`render()` method, use a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to the `handleChange` method.
|
|
|
|
```jsx
|
|
class LimitedTextarea extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
content: props.value,
|
|
characterCount: props.value.length,
|
|
limit: props.limit
|
|
};
|
|
this.handleChange = this.handleChange.bind(this);
|
|
}
|
|
|
|
handleChange(event) {
|
|
let newContent = event.target.value;
|
|
if(newContent.length >= this.state.limit) newContent = newContent.slice(0, this.state.limit);
|
|
this.setState(state => ({ content: newContent, characterCount: newContent.length }));
|
|
}
|
|
render() {
|
|
return (
|
|
<div>
|
|
<textarea
|
|
rows={this.props.rows}
|
|
cols={this.props.cols}
|
|
onChange={this.handleChange}
|
|
value={this.state.content}
|
|
>
|
|
</textarea>
|
|
<p>{this.state.characterCount}/{this.props.limit}</p>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
```
|
|
|
|
```jsx
|
|
ReactDOM.render(
|
|
<LimitedTextarea limit={32} value='Hello!' />,
|
|
document.getElementById('root')
|
|
);
|
|
```
|
|
|
|
< !--tags: input,state,class -- >
|
|
|
|
< !--expertise: 0 -- >
|
|
|