Question

我正在尝试使用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;

下面是我的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;

我不确定为什么在控制台上看不到该值。任何帮助表示赞赏。

Answer 1

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

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.log(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处理程序。您可以在控制台中查看更改状态。当您按下按钮时，它将使用您的状态值创建一个对象，然后触发警报。

Answer 2

您需要将clickHandler传递给Form组件作为道具

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

您正在使用React Uncontrolled form inputs，因此您需要处理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中，您可以像这样那样从Submit事件中检索所有值

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

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

Answer 3

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>
        );
    }
}

Answer 4

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;

无法使用onClick事件ReactJS

4 个答案: