javascript - React onsubmit 将折旧的引用更改为更新的代码

Question

我有一些代码可以捕获提交的表单数据。

这里是:

class UserInfo 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.log('-->', formData);
  }

  render() {
    return (
        <div>
          <form onSubmit={this.handleSubmit}>
            <input ref="fullname" className="fullname" type='text' name="fullname"/>
            <input ref="email" className="email" type='tel' name="email"/>
            <input type="submit" value="Submit"/>
          </form>
        </div>
    );
  }
}

export default UserInfo;

以上工作正常，但引用文献已贬值，所以我的问题是......

如何将此引用更改为未折旧代码？

Answer 1

只需更改此:

   <input ref="fullname" className="fullname" type='text' name="fullname"/>
    <input ref="email" className="email" type='tel' name="email"/>
    <input type="submit" value="Submit"/>

对此:

   <input ref={fullname => this.fullname =fullname} className="fullname" type='text' name="fullname"/>
    <input ref={email => this.email = email} className="email" type='tel' name="email"/>
    <input type="submit" value="Submit"/>

现在引用存储在 this.fullname 和 this.email 中。 不要忘记检查它们是否为空。

希望对您有所帮助。