Question

这是我的代码这是一种简单的形式。我试图点击按钮上的点击事件

 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>
            );

Answer 1

您忘记传递onSubmit

的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
}

Answer 2

试试这个：

{{1}}

Answer 3

你能尝试这样吗

      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>
                );

Answer 4

你想在这里使用onclick方法，它提交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>

Answer 5

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

渲染：

<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 })
        }

如何在reactjs中编写onclick事件？

5 个答案: