在提交时反应显示控制台中没有数据

Question

我有一个简单的表单，当提交表单时，它会将数据传递到控制台。

代码如下：

class myComponent extends React.Component {
    constructor(props) {
      super(props);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleSubmit(e) {
        e.preventDefault();

        const formData = {};
        for (const field in this.refs) {
          formData[field] = this.refs[field].value;
        }
        console.info('-->', formData);
      }

    render() {
      return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input ref="name" type="text" required />
                    <input ref="email" type="text"  required />
                    <button type="submit">Submit</button>
                </form>
        </div>
      );
    }
  }
  export default myComponent;

我遇到的问题是控制台未显示任何内容。

就像句柄未触发提交。

我该如何解决？

Answer 1

一切似乎都很好，并且可以按预期运行，就像demo在评论中提供的paul一样。除naming convention provided by react以外，应以大写字母开头。使用大写字母的组件名称：

class MyComponent extends React.Component {
...
export default MyComponent;

Answer 2

我尝试过，您的代码没问题：