Réagissez à la case à cocher et sélectionnez onChange

J'ai lu beaucoup de questions sur ce sujet et parcouru la documentation de React également, mais je ne suis toujours pas plus sage. Je ne peux pas obtenir un champ de saisie pour émettre quoi que ce soit (un événement) lors d'un clic ou d'un changement.

Mon code est ci-dessous et à part l'utilisation de materialzecss, j'utilise du HTML / JSX de base et aucun autre javascript.

Je ne peux tout simplement pas mettre à jour l'entrée pour basculer entre coché / non coché sur onChange ou onClick. Quelqu'un peut-il me dire où je vais mal ici?

import React, { Component } from 'react'
import Alert from '../components/shared/Alert'
import { Redirect } from 'react-router-dom'
import axios from 'axios'

class Create extends Component {
  constructor(){
    super()
    this.state = {
      redirect:false,
      alert:{
        show: false
      },
      checked:true
    }
  }

  handleChange(event) {
    this.setState({
      recipe : {[event.target.name]: event.target.value}
    })
    console.log(this.state);

  }

  handleSubmit(event) {

  }


  render() {
    const { redirect } = this.state;
    const showAlert = this.state.alert.show;
     if (redirect) {
       return <Redirect to='/'/>;
     } else if (showAlert) {
        console.log("alert");
     }
    return (
      <div className="row">
        {showAlert ? <Alert /> : ''}
        <div className="container">
          <div className="row">
              <div className="col s10 offset-s1  z-depth-1" id="loginForm">
              <h5 className="red darken-4" id="title">Create New Recipe</h5>
              <form >
                <div className="input-field" id="username" >
                  <input type="text" className="validate" name="name"
                  onChange={this.handleChange.bind(this)} />
                  <label htmlFor="name">Name</label>
                </div>
                <div className="input-field" id="password">
                  <input type="text" className="validate" name="intro" 
                  onChange={this.handleChange.bind(this)} />
                  <label htmlFor="password">Intro</label>
                </div>
                <div className="input-field" id="password">
                  <textarea id="textarea1" className="materialize-textarea" name="body" 
                  onChange={this.handleChange.bind(this)}>
                  </textarea>
                  <label htmlFor="textarea1">Recipe</label>
                </div>
                <div className="row">
                  <div className="input-field col s12 m5" id="password">
                    <Serves function={this.handleChange.bind(this)}/>
                    <label>Serves</label>
                  </div>
                  <div className="input-field col s12 m5" id="test">
                    <select name="cuisine" defaultValue="2" onChange={(e)=>{console.log(e)}}>
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                    </select>
                    <label>Cuisine</label>
                  </div>
                </div>
                <div className="input-field" id="password">
                  <input type="checkbox" className="filled-in" id="filled-in-box"/>
                  <label htmlFor="filled-in-box">Public?</label>
                </div>
              <button type="submit" className="waves-effect waves-light btn red darken-4" id="loginbtn">Login</button>
              <a href="/app/dashboard" className="waves-effect waves-light btn amber darken-1" id="loginbtn">Back</a>
            </form>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default Create;

const Serves = (props) => {
  return(
    <select onChange={props.function} name="serves" >
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="9">10</option>
    </select>
  )
}