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

希望对您有帮助。

对onsubmit更改折旧的ref进行反应以更新代码

1 个答案: