React Component提交表单功能未获取值

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

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

1. 您绑定handleSubmit 两次。

   • 关于构造函数this.handleSubmit = this.handleSubmit.bind(this);

   • 并在表单上支持 onSubmit <form onSubmit={this.handleSubmit.bind(this)}>

2. 您没有处理表单上的输入值。您应该做一些事情来访问在每个输入上输入的值，监听 onChange 事件 (Controlled Component) 或以 Uncontrolled component 访问它

3. 您的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 中，您应该在表单上使用“受控组件”。

查看相关的 React 文档：https://facebook.github.io/react/docs/forms.html