React onsubmit将折旧的refs改为更新的代码

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;

以上工作正常，但refs折旧，所以我的问题是......

如何将此refs更改为非折旧代码？

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中。不要忘记检查它们是否为空。

我希望它有所帮助。