首页 > 解决方案 > 在 React 中提交后将 textarea 设置为原始

问题描述

在我的 React 组件中有一个required不应提交为空的文本区域。提交后,我留在同一个组件中,因此 textarea 有红色边框以指示其错误状态。

const CommentForm = ({ postId, addComment }) => {
const [text, setText] = useState('');

const onSubmit = evt => {
    evt.preventDefault();
    addComment(postId, text);
    setText('');
};

const onChange = evt => {
    setText(evt.target.value)
};

return (
    <div className='post-form'>
        <div className='bg-primary p'>
            <h3>Add a Comment</h3>
        </div>
        <form className='form my-1' onSubmit={onSubmit}>
            <textarea
                name='text'
                placeholder='Comment on this post...'
                required
                value={text}
                onChange={onChange}
            />
            <input type='submit' className='btn btn-dark my-1' value='Submit' />
        </form>
    </div>
);

};

提交非空值后如何删除红色边框?完整的组件代码位于https://github.com/ElAnonimo/leansquad/blob/master/src/components/post/CommentForm.js

标签: reactjstextarea

解决方案


推荐阅读