Question

我有一个表单组件，我提交，然后想要在提交后将数据传递给函数，但我收到一条空白警告消息。

以下是代码：

import React, { Component } from 'react';

class SubmitForm extends Component {
  constructor() {
    super();
    this.state = {title: ''};
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    this.getdata(this.state.title, this.state.firstname, this.state.lastname);
    event.preventDefault();
  }

  getdata(title) {
    alert(title);
    alert(firstname);
    alert(lastname);
  }

  render() {
    return (
        <div>
          <form onSubmit={this.handleSubmit.bind(this)}>

              <label htmlFor="title">Title</label>
              <input type="text" id="title" />

              <label htmlFor="firstname">Firstname</label>
              <input type="text" id="firstname" />

              <label htmlFor="lastname">Lastname</label>
              <textarea id="lastname"  rows="3"></textarea>

            <input type="submit" value="Submit" />
          </form>
        </div>
    );
  }
}

export default SubmitForm;

如何解决此问题，以便获取数据？

Answer 1

每个组件都需要有onChange事件的处理程序。

function handleTitleChange(event) {
  this.setState(function() {
    return { title: event.target.value };
  });
}

<input type="text" id="title" value={this.state.title} onChange={this.handleTitleChange.bind(this)} />

以下是React文档的链接：https://facebook.github.io/react/docs/forms.html#controlled-components

还有不受控制的组件，但这不是“推荐”的方式。

Answer 2

这些是您的代码存在的问题：

您绑定handleSubmit两次。
- 在构造函数this.handleSubmit = this.handleSubmit.bind(this);
- 并在表单上提交了<form onSubmit={this.handleSubmit.bind(this)}>
您没有处理表单上的输入值。您应该做一些事情来访问在每个输入上输入的值，听取onChange事件（Controlled Component）或以Uncontrolled component
您的getdata()方法错误，您正在设置一个参数并传递三个参数。

您的定义是：

  getdata(title) {
    alert(title);
    alert(firstname);
    alert(lastname);
  }

你称之为：

this.getdata(this.state.title, this.state.firstname, this.state.lastname);

这不是函数的工作方式。要使其如上所述，您需要将其定义为：

getdata(title, firstName, lastName) {
  alert(title);
  alert(firstName);
  alert(lastName);
}

因此，一旦您解决了所有这些错误，您应该查看React documentation以了解有关React如何工作的更多信息。

与此同时，这是一个可行的示例，其中包含React文档中不受控制的组件，可帮助您了解如何使您的示例正常工作：

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => this.input = input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <NameForm />,
  document.getElementById('app')
);

<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="app"></div>

Answer 3

表单输入元素没有设置为state的value属性。在React中，您应该使用＆＃39;受控组件＆＃39;在表格上。

请参阅相关的React文档：https://facebook.github.io/react/docs/forms.html

React Component Submit表单函数没有获取值

3 个答案: