Reactjs 无法使用onClick事件

我正在尝试使用onClick以表单形式发送数据。下面是我的表格

import React from 'react';
const form = props => (
    <form>
      <input type = "text" name = "name" placeholder="name" />
      <input type = "text" name = "lastname" placeholder="last name" />
      <input type = "text" name = "id" placeholder="email address" />
      <button onClick = {props.clickHandler}>Send</button>
    </form>

);
export default form;

从“React”导入React；
const form=props=>(
发送
);
导出默认表单；

下面是我的App.js

import React, { Component } from 'react';
import './App.css';
import Form from './Components/Form';

class App extends Component {
  clickHandler = async(e) =>{
    e.preventDefault();
    const name = e.target.value;
    console.log(name + 'was typed');
  }

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

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
从“./Components/Form”导入表单；
类应用程序扩展组件{
clickHandler=async（e）=>{
e、 预防默认值（）；
const name=e.target.value；
console.log（名称+'已键入'）；
}
render（）{
返回(
我是一个React应用程序
);
}
}
导出默认应用程序；

---

我不确定为什么该值在控制台上不可见。非常感谢您的帮助。

您需要将

clickHandler

作为道具传递给您的

表单

组件

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

在

clickHandler

中，您现在可以像这样从submit事件中检索所有值

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

---

编辑：添加了查看表单值的方法

您需要将

点击处理程序

作为道具传递给

表单

组件

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

在

clickHandler

中，您现在可以像这样从submit事件中检索所有值

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

---

编辑：添加了查看表单值的方法

首先将组件命名为以大写字母开头。 对于这种情况，可以将值保持在主组件的状态，然后通过传递给子组件的回调函数进行更新

类应用程序扩展了React.Component{
状态={
姓名：“，
姓氏：“，
电子邮件：“
};
clickHandler=e=>{
e、 预防默认值（）；
const{name，lastName，email}=this.state；
const data=`数据为：${name}-${lastName}-${email}`；
警报（数据）；
};
changeHandler=e=>{
e、 预防默认值（）；
常量{name，value}=e.target；
这是我的国家({
[名称]：值
});
};
render（）{
console.log（this.state）；
const{clickHandler，changeHandler}=this；
返回(
我是一个React应用程序
);
}
}
const Form=props=>(
发送
);
render（，document.getElementById（“根”））
首先，将组件命名为以大写字母开头。
对于这种情况，可以将值保持在主组件的状态，然后通过传递给子组件的回调函数进行更新


类应用程序扩展了React.Component{
状态={
姓名：“，
姓氏：“，
电子邮件：“
};
clickHandler=e=>{
e、 预防默认值（）；
const{name，lastName，email}=this.state；
const data=`数据为：${name}-${lastName}-${email}`；
警报（数据）；
};
changeHandler=e=>{
e、 预防默认值（）；
常量{name，value}=e.target；
这是我的国家({
[名称]：值
});
};
render（）{
console.log（this.state）；
const{clickHandler，changeHandler}=this；
返回(
我是一个React应用程序
);
}
}
const Form=props=>(
发送
);
render（，document.getElementById（“根”））

从“React”导入React，{PureComponent}；
导出类表单扩展了PureComponent{
状态={
名称：“”，
姓氏：“”，
id:“”
}
onNameChange=（事件）=>{
这是我的国家({
名称：event.target.value
})
}
onLastNameChange=（事件）=>{
这是我的国家({
lastname:event.target.value
})
}
onEmailChange=（事件）=>{
这是我的国家({
id:event.target.value
})
}
render（）{
返回(
发送
);
}
}
从“React”导入React，{PureComponent}；
导出类表单扩展了PureComponent{
状态={
名称：“”，
姓氏：“”，
id:“”
}
onNameChange=（事件）=>{
这是我的国家({
名称：event.target.value
})
}
onLastNameChange=（事件）=>{
这是我的国家({
lastname:event.target.value
})
}
onEmailChange=（事件）=>{
这是我的国家({
id:event.target.value
})
}
render（）{
返回(
发送
);
}
}
从“React”导入React，{Component}；
导入“/App.css”；
从“./Components/Form”导入表单；
类应用程序扩展组件{
clickHandler=（数据）=>{
log（'data:：'，data）；
}
render（）{
返回(
我是一个React应用程序
);
}
}
导出默认应用程序；
从“React”导入React，{Component}；
导入“/App.css”；
从“./Components/Form”导入表单；
类应用程序扩展组件{
clickHandler=（数据）=>{
log（'data:：'，data）；
}
render（）{
返回(
我是一个React应用程序
);
}
}
导出默认应用程序；
谢谢@clement prevost。那么如何从表单中记录值呢？谢谢@clement prevost。那么如何记录表单中的值呢？这是针对表单组件的。这是针对表单组件的。您的应用程序组件应将clickHandler作为道具而不是表单传递。您的应用程序组件应将clickHandler作为道具而不是表单传递
import React, { Component } from 'react';

import './App.css';

import Form from './Components/Form';

class App extends Component {

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

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

}

export default App;