как написать событие onclick в реагировать? - PullRequest
0 голосов
/ 30 мая 2018

вот мой код, это простая форма.Я пытаюсь вызвать событие нажатия на кнопку

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

Ответы [ 5 ]

0 голосов
/ 30 мая 2018
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 })
        }
0 голосов
/ 30 мая 2018

Вы хотите метод 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>
0 голосов
/ 30 мая 2018

Вы забыли передать событие 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
}
0 голосов
/ 30 мая 2018

Можете ли вы попробовать вот так

      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>
                );
0 голосов
/ 30 мая 2018

попробуйте это:

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...