javascript - React: How to submit a form with <textarea> with enter key and without a submit button with React Hoo

admin管理员组

文章数量:1332881

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 + `/ment/`, formData);
} ;

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

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

Please do help.

Thanks a lot.

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 + `/ment/`, formData);
} ;

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

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

Please do help.

Thanks a lot.

• javascript
• reactjs
• react-native
• react-redux
• rxjs

Share Improve this question Follow edited Feb 11, 2021 at 8:13 prehistoricbeast asked Feb 11, 2021 at 7:59 prehistoricbeastprehistoricbeast 43511 gold badge77 silver badges1818 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

you can use React SyntheticEvent onKeyPress like this:

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

UPDATE
In your mentEnterSubmit function:

 const mentEnterSubmit = (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

本文标签：