React: How to submit a form with <textarea> with enter key and without a submit button with React Hooks?

user_14544866 0
Viewed 2158

Halo guys I am quite new to react and I want to submit a form with only a text area with enter key press. I followed some of the SO questions but still no luck as it is not getting submitted. I also want to clear the text area after the submit. How can I do it with the below code?

This is the code I currently have.

const { register, handleSubmit, control, errors } = useForm();

const CommentOnSubmit = (data) => {
    let formData = new FormData();

    formData.append('content', data.content);
    formData.append('user', user?.id);

    axiosInstance.post(`api/blogs/` + slug + `/comment/`, formData);
} ;

// const commentEnterSubmit = (e) => {
//     if(e.key === 'Enter' && e.shiftKey == false) {
//         return(
//             e.preventDefault(),
//             CommentOnSubmit()
//         )
//     }
//   }

<form noValidate onSubmit={handleSubmit(CommentOnSubmit)}>
                <div className="post_comment_input">
                    <textarea
                        type="text" 
                        placeholder="Write a comment..."
                        name="content"
                        ref={register({required: true, maxLength: 1000})}
                    />
                </div>
                <div className="comment_post_button">
                    <Button type="submit" variant="contained" color="primary">comment</Button>
                </div>
            </form>

Please do help.

Thanks a lot.

react-redux rxjs react-native reactjs javascript
1 Answers

you can use React SyntheticEvent onKeyPress like this:

   <textarea
          type="text"
          placeholder="Write a comment..."
          onKeyPress={ commentEnterSubmit}
          name="content"
          ref={register({ required: true, maxLength: 1000 })}
        />

UPDATE
In your commentEnterSubmit function:

 const commentEnterSubmit = (e) => {
    if (e.key === "Enter" && e.shiftKey == false) {
      const data = {content:e.target.value};
      return handleSubmit(CommentOnSubmit(data));
    }

And if you want to reset your input you can use the setValue from useForm hooks. like this:
add setValue to const { register, handleSubmit, control, errors,setValue } = useForm();

 const CommentOnSubmit = (data) => {
    let formData = new FormData();

    formData.append("content", data);
    formData.append("user", user?.id);
// your axios call ...
    setValue("content","");
  };

I have made a code sandBox based on your example

user_145225910
Related