0

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

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

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

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

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

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

2 件の回答 2

1

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

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

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

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

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

1

<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:

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, (後略)

1
  • ただ、JavaScriptを使う前提であれば、自分でGUIイベントをハンドルしてPOSTすれば良いと思うので、別に上記の要求に従って実装する必要は無いかと。 Commented 2020年10月25日 6:46

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。