CODEWITHSUNDEEP
asp.net-mvcreactjs
Mandar Dhadve
Mandar Dhadve

Reputation: 381

how to write onclick event in reactjs?

here is my code this is simple form. I am trying to call on click event on button click

 render: function () {
            return (
                <form className="commentForm">
                    <input
                        type="text"
                        placeholder="Your name"
                        value={this.state.author}
                        onChange={this.handleAuthorChange}
                    />
                    <input
                        type="text"
                        placeholder="Say something..."
                        value={this.state.text}
                        onChange={this.handleTextChange}
                    />
                    <input type="submit" value="Post" />
                </form>
            );

Upvotes: 2

Views: 157

Answers (5)

Johnson Samuel
Johnson Samuel

Reputation: 2076

You need not have separate onChange for two fields unless you do something different in each of them.

Render:

<form className="commentForm" onSubmit={this.handleSubmit}>
                    <input
                        type="text"
                        placeholder="Your name"
                        name="author"
                        onChange={this.handleChange}
                    />
                    <input
                        type="text"
                        placeholder="Say something..."
                        name="text"
                        onChange={this.handleChange}
                    />
                    <button type="submit"  >submit</button>
                </form>

When submit is clicked :



    handleSubmit = (e) => {
            e.preventDefault();
            console.log(this.state.author) //whatever you want to process the data with...
        }

You can have single handleChange to set the state 

        handleChange = (e) => {
            const { value, name } = e.target;
            this.setState({ [name]: e.target.value })
        }

Upvotes: 0

Sankar Martha
Sankar Martha

Reputation: 131

u want onclick method here it is onsubmit same work of onclick.

 handleSubmit(){
  console.log(this.state.author);// u can see the value of autor and say somthing input vale in here it is coming right value or not
  console.log(this.state.text);
          axios.post(route,{    
         name:this.state.author,  //these name and say are the variable whice are use to take the values to back end
         Say :this.state.text    
       }).then({response});   //here u cn give some thing to disply after data add to database.
   }

<form className="commentForm" onsubmit={this.handleSubmit.bind(this)}>
                <input
                    type="text"
                    placeholder="Your name"
                    value={this.state.author}
                    onChange={this.handleAuthorChange}
                />
                <input
                    type="text"
                    placeholder="Say something..."
                    value={this.state.text}
                    onChange={this.handleTextChange}
                />
              <input type="submit" value="Submit" />
            </form>

Upvotes: 0

Prabhu
Prabhu

Reputation: 1057

Can you try like this

      handleTextChange(e) {
        const { name, value } = e.target;
        this.setState({
            [name]: value
        });
      }

      _handleSubmit(e) {
        e.preventDefault();
        let { author, text} = this.state;
      // dispatch the submit function
      }

         render: function () {
                return (
                    <form className="commentForm" onSubmit={this._handleSubmit}>
                        <input
                            type="text"
                            placeholder="Your name"
                            name="author"
                            value={this.state.author}
                            onChange={this.handleAuthorChange}
                        />
                        <input
                            type="text"
                            placeholder="Say something..."
                            name="text"
                            value={this.state.text}
                            onChange={this.handleTextChange}
                        />
                        <input type="submit" value="Post" />
                    </form>
                );

Upvotes: 0

Praveen Kumar
Praveen Kumar

Reputation: 2014

You forgot to pass the onSubmit event for form

 render: function () {
            return (
                <form className="commentForm" onSubmit={this.submit}>
                    <input
                        type="text"
                        placeholder="Your name"
                        value={this.state.author}
                        onChange={this.handleAuthorChange}
                    />
                    <input
                        type="text"
                        placeholder="Say something..."
                        value={this.state.text}
                        onChange={this.handleTextChange}
                    />
                    <input type="submit" value="Post" />
                </form>
            );


submit: function() {
// do your stuff
}

Upvotes: 6

user9862129
user9862129

Reputation:

try this:

<form className="commentForm"  onSubmit={this.handleSubmit}>
                    <input
                        type="text"
                        placeholder="Your name"
                        value={this.state.author}
                        onChange={this.handleAuthorChange}
                    />
                    <input
                        type="text"
                        placeholder="Say something..."
                        value={this.state.text}
                        onChange={this.handleTextChange}
                    />
                    <input type="submit" value="Post" />
                </form>

Upvotes: 1

Related Questions