React form onSubmit

Question

class InputData extends Component {
    constructor(props){
        super(props);
        this.state = {
            score: 0,
            date: '',
            type: '',
        };
    }

    onChange = event => {
       this.setState({ [event.target.name]: event.target.value });
    };

    onSubmit = event => {
       console.log('submitted')
    }


    render() {
        const { score, date, type } = this.state;

        const isInvalid = score === 0 || date === '' || type === '';

        return (
            <div>
            <h1>InputData</h1>
            <form onSubmit={this.onSubmit}>
                <input 
                type='text'
                name='type'
                value={type}
                onChange={this.onChange}/>
                <input 
                type='text'
                name='date'
                value={date}
                onChange={this.onChange}/>
                <input
                type='number'
                name='score'
                value={score}
                onChange={this.onChange}/>
                <button type='submit'>Submit Data</button>
            </form>
            </div>
        )
    }
}

ReactのformタグのonSubmitが動作しません。公式のドキュメントを参考に作りました。自分では原因がさっぱりわかりません。どなたか考えられる可能性を教えてほしいです。

Answer 1

onSubmitは動作しているけど、そのままページ遷移が行われるためにコンソールがリセットされ、console.log()の結果が見えない、ということが考えられます。

Comments

[tsugumi_7788]

確認したら確かに一瞬コンソールに表示されていました。ありがとうございました。