ProjectForm.js

import React from 'react';
import InputProjectName from './InputProjectName.js';
import RadioColors from './RadioColors.js';

export class ProjectForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            projectName: "",
            selectedUsersOption: [],
            selectedColorId: ""
        }
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleInputChange(event) {
        if (event.target.name === "project_name") {
            this.setState({ projectName: event.target.value });
        }
        if (event.target.name === "color") {
            this.setState({ selectedColorId: parseInt(event.target.value, 10) });
        }
    }

    handleSubmit() {
        console.log("submit button pushed");
        console.log(this.state.selectedColorId);
        console.log(this.state.projectName);
    }

    render() {
        return (
            <div className="project-form">
                <form action="javascript: void(0);" onSubmit={this.handleSubmit}>
                    <InputProjectName
                        projectName={this.state.projectName}
                        handleInputChange={this.handleInputChange}
                    />
                    <RadioColors
                        selectedColorId={this.state.selectedColorId}
                        handleInputChange={this.handleInputChange}
                    />
                    <button type="submit">送信</button>
                </form>
            </div>
        );
    }
}