2019-09-10
描述
渲染一个字符受到限制的 textarea 组件。
- 使用
React.useState()
hook 创建一个content
状态变量并设置他的值为value
。创建一个setFormattedContent
方法,当长度大于limit
时可以对其进行截断 - 使用
React.useEffect()
hook 来调用参数为content
状态变量的setFormattedContent
方法 - 让一个
<textarea>
元素和一个展示字符数的<p>
元素置于<div>
元素中,其中<textarea>
绑定的onChange
事件调用了参数是event.target.value
的setFormattedContent
方法
实现
function LimitedTextarea({ rows, cols, value, limit }) {
const [content, setContent] = React.useState(value);
const setFormattedContent = text => {
text.length > limit ? setContent(text.slice(0, limit)) : setContent(text);
};
React.useEffect(() => {
setFormattedContent(content);
}, []);
return (
<div>
<textarea
rows={rows}
cols={cols}
onChange={event => setFormattedContent(event.target.value)}
value={content}
/>
<p>
{content.length}/{limit}
</p>
</div>
);
}
使用
ReactDOM.render(<LimitedTextarea limit={32} value="Hello!" />, document.getElementById('root'));
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于