Невозможно использовать событие onClick ReactJS

Вам необходимо передать clickHandler в качестве опоры для вашего компонента Form.

render() {
  return (
    <div className = "App">
      <h1>I am a React App </h1>
      <Form onSubmit = {this.clickHandler} />
    </div>
  )
}

Вы используете Реагировать на неконтролируемые вводы формы, поэтому вам нужно обработать событие формы onSubmit

import React from "react"
const form = props => (
  <form
    onSubmit = {e => {
      e.preventDefault()
      this.props.onSubmit(e)
    }}
  >
    <input type = "text" name = "name" placeholder = "name" />
    <input type = "text" name = "lastname" placeholder = "last name" />
    <input type = "text" name = "id" placeholder = "email address" />
    <input type = "submit" value = "Send" />
  </form>
)
export default form

А в clickHandler теперь вы можете получить все значения из события отправки следующим образом:

clickHandler = async e => {
  e.preventDefault()
  const name = e.target.elements[0]
  console.info(name + "was typed")
}

Редактировать: добавлен способ просмотра значений формы

Прежде всего назовите компоненты, начинающиеся с заглавной буквы. Для таких ситуаций вы можете сохранить значения в состоянии вашего основного компонента, а затем обновить их с помощью функций обратного вызова, которые передаются дочернему компоненту.

class App extends React.Component {
  state = {
    name: "",
    lastName: "",
    email: ""
  };

  clickHandler = e => {
    e.preventDefault();
    const { name, lastName, email } = this.state;
    const data = `Data is: ${name}-${lastName}-${email}`;
    alert(data);
  };

  changeHandler = e => {
    e.preventDefault();
    const { name, value } = e.target;
    this.setState({
      [name]: value
    });
  };

  render() {
    console.info(this.state);
    const { clickHandler, changeHandler } = this;
    return (
      <div className = "App">
        <h1>I am a React App </h1>
        <Form clickHandler = {clickHandler} changeHandler = {changeHandler} />
      </div>
    );
  }
}

const Form = props => (
  <form>
    <input
      onChange = {props.changeHandler}
      type = "text"
      name = "name"
      placeholder = "name"
    />
    <input
      onChange = {props.changeHandler}
      type = "text"
      name = "lastName"
      placeholder = "last name"
    />
    <input
      onChange = {props.changeHandler}
      type = "text"
      name = "email"
      placeholder = "email address"
    />
    <button onClick = {props.clickHandler}>Send</button>
  </form>
);

ReactDOM.render(<App />, document.getElementById("root"));

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id = "root"></div>

Для входов вам понадобится обработчик onChange, для вашей кнопки вам понадобится обработчик onClick, как вы думали. Вы можете увидеть изменение состояния в консоли. Когда вы нажимаете кнопку, он создает объект, используя ваши значения состояния, а затем запускает предупреждение.

import React, { PureComponent } from 'react';

export class Form extends PureComponent {

    state = {
        name: '',
        lastname: '',
        id: ''
    }

    onNameChange = (event) => {
        this.setState({
            name: event.target.value
        })
    }

    onLastNameChange = (event) => {
        this.setState({
            lastname: event.target.value
        })
    }

    onEmailChange = (event) => {
        this.setState({
            id: event.target.value
        })
    }

    render() {
        return (
            <form>
                <input type = "text" name = "name" placeholder = "name" onChange = {this.onNameChange} />
                <input type = "text" name = "lastname" placeholder = "last name" onChange = {this.onLastNameChange} />
                <input type = "text" name = "id" placeholder = "email address" onChange = {this.onEmailChange}/>
                <button onClick = {props.clickHandler.bind(null, this.state)}>Send</button>
            </form>
        );
    }
}

import React, { Component } from 'react';

import './App.css';

import Form from './Components/Form';

class App extends Component {

    clickHandler = (data) => {
        console.info('data::', data );
    }

    render() {
        return (
            <div className = "App">
                <h1>I am a React App </h1>
                <Form clickHandler = {this.clickHandler}/>
            </div>
        );
    }

}

export default App;