

現在、react-reduxを学習しています

以下のようなコードを書いたのですが、formタグ内のonSubmitが動作しません  
inputタグ内のonChangeは問題なく動作します

どなたかご教示頂けましたら幸いです

[code]

    import React,{ Component } from 'react'
    import { connect } from 'react-redux'
    import { addPost } from '../actions/postAction'
    
    
    class AddPost extends Component{
        state = {
            title: '',
            body: ''
        }
    
        handleChangeTitle =(e) =>{
            this.setState({
                title: e.target.value
            })
            console.log(this.state)
        }
    
        handleChangeBody =(e) =>{
            this.setState({
                body: e.target.value
            })
            console.log(this.state)
        }
    
        handleSubmit =(e) =>{
            e.preventDefault();
            this.props.mapDispatchToProps(this.props.post.id)
            this.setState({
                title: '',
                body: ' '
            })
        }
    
        render(){
            return(
                <div>
                    <form onSubmit={ this.handleSubmit }>
                        <label>title</label>
                        <input type="text" id="title" onChange={ this.handleChangeTitle } value={this.state.title}/>
                        <label>body</label>
                        <input type="text" id="body"  onChange={ this.handleChangeBody } value={this.state.body}/>
                    </form>
                </div>
            )
        }
    }
    
    const mapDispatchToProps = (dispatch) => {
        return{
            addPost: (title,body) => { dispatch(addPost(title,body))}
        }
    }
    
    export default connect(mapDispatchToProps)(AddPost);
[/code]

こちらの回答を参考に  
constructorを記載しましたが、動作させることは出来ませんでした

<https://stackoverflow.com/questions/35098324/react-form-component-onsubmit-
handler-not-working>


CC BY-SA 4.0
2019-04-07T11:55:58.147
53997
2020-10-25T03:48:18.837
2020-10-25T03:48:18.837
2808
32822
question
javascript html reactjs redux
react redux formタグのonSubmitが動作しない


submit イベントを発火させる要素がないからではないでしょうか？

`<form>` の `onSubmit` は submit イベントが発火したときに呼ばれます。  
<https://developer.mozilla.org/en-
US/docs/Web/API/HTMLFormElement/submit_event>

`<form>` 内に `<button>` または `<input type="submit">` タグを追加し、そのボタンをクリックすることで
`onSubmit` が呼ばれるはずです。

[code]

    <form onSubmit={ this.handleSubmit }>
        <label>title</label>
        <input type="text" id="title" onChange={ this.handleChangeTitle } value={this.state.title}/>
        <label>body</label>
        <input type="text" id="body"  onChange={ this.handleChangeBody } value={this.state.body}/>
        <input type="submit" value="add" />
    </form>
    
[/code]

参考: <https://ja.reactjs.org/docs/forms.html>


CC BY-SA 4.0
2019-04-26T11:16:16.627
54502
2019-04-26T11:16:16.627
32959
53997
answer


`<input type="text">`内でエンターキーを押した際にsubmitすることを想定していると思いますが、
そういった暗黙のsubmit(implicit submission)を行うためには次のいずれかでなければなりません:

  * 送信フィールドが1つ
  * submitボタンを備えている

今回送信するフィールドは2つなので、submitボタンが必要です。

* * *

参考:

HTML Living Standard — Last Updated 22 October 2020 > [4.10.21.2 Implicit
submission](https://html.spec.whatwg.org/multipage/form-control-
infrastructure.html#implicit-submission):

> If the form has no submit button, then the implicit submission mechanism
> must do nothing if the form has more than one field that blocks implicit
> submission, (後略)


CC BY-SA 4.0
2020-10-25T03:46:14.650
71493
2020-10-25T03:46:14.650
2808
53997
answer