有几种方法可以做到这一点:

1)通过索引从数组的表单元素中获取值

handleSubmit = (event) => {
  event.preventDefault();
  console.log(event.target[0].value)
}

2)在html中使用name属性

handleSubmit = (event) => {
  event.preventDefault();
  console.log(event.target.elements.username.value) // from elements property
  console.log(event.target.username.value)          // or directly
}

<input type="text" name="username"/>

3)使用裁判

handleSubmit = (event) => {
  console.log(this.inputNode.value)
}

<input type="text" name="username" ref={node => (this.inputNode = node)}/>

完整的示例

class NameForm extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault()
    console.log(event.target[0].value)
    console.log(event.target.elements.username.value)
    console.log(event.target.username.value)
    console.log(this.inputNode.value)
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input
            type="text"
            name="username"
            ref={node => (this.inputNode = node)}
          />
        </label>
        <button type="submit">Submit</button>
      </form>
    )
  }
}

在javascript的许多事件中，我们有event，它给出一个对象，包括发生了什么事件，值是什么等等。

这也是我们在ReactJs中使用的表单…

所以在你的代码中，你将状态设置为新值…就像这样:

class UserInfo extends React.Component {

  constructor(props) {
    super(props);
    this.handleLogin = this.handleLogin.bind(this);
  }

  handleLogin(e) {
    e.preventDefault();
    for (const field in this.refs) {
      this.setState({this.refs[field]: this.refs[field].value});
    }
  }

  render() {
    return (
        <div>
          <form onSubmit={this.handleLogin}>
            <input ref="email" type="text" name="email" placeholder="Email" />
            <input ref="password" type="password" name="password" placeholder="Password" />
            <button type="button">Login</button>
          </form>
        </div>
    );
  }
}

export default UserInfo;

另外，这是React v.16中的表单示例，只是作为将来创建表单的参考:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

这是一个动态添加字段的示例。在这里，表单数据将使用React useState钩子通过输入名称键存储。

import React, { useState } from 'react' function AuthForm({ firebase }) { const [formData, setFormData] = useState({}); // On Form Submit const onFormSubmit = (event) => { event.preventDefault(); console.log('data', formData) // Submit here }; // get Data const getData = (key) => { return formData.hasOwnProperty(key) ? formData[key] : ''; }; // Set data const setData = (key, value) => { return setFormData({ ...formData, [key]: value }); }; console.log('firebase', firebase) return ( <div className="wpcwv-authPage"> <form onSubmit={onFormSubmit} className="wpcwv-authForm"> <input name="name" type="text" className="wpcwv-input" placeholder="Your Name" value={getData('name')} onChange={(e) => setData('name', e.target.value)} /> <input name="email" type="email" className="wpcwv-input" placeholder="Your Email" value={getData('email')} onChange={(e) => setData('email', e.target.value)} /> <button type="submit" className="wpcwv-button wpcwv-buttonPrimary">Submit</button> </form> </div> ) } export default AuthForm

像这样给你的输入参考

<input type="text" name="email" placeholder="Email" ref="email" />
<input type="password" name="password" placeholder="Password" ref="password" />

然后你可以像soo一样在你的handleLogin中访问它

handleLogin: function(e) {
   e.preventDefault();
    console.log(this.refs.email.value)
    console.log(this.refs.password.value)
}

对付裁判的一个简单方法:

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="phone" className="phone" type='tel' name="phone"/> <input ref="email" className="email" type='tel' name="email"/> <input type="submit" value="Submit"/> </form> </div> ); } } export default UserInfo;

 onChange(event){
     console.log(event.target.value);
  }
  handleSubmit(event){ 
    event.preventDefault();
    const formData = {};
      for (const data in this.refs) {
        formData[data] = this.refs[data].value;
      }
    console.log(formData);
  }



 <form onSubmit={this.handleSubmit.bind(this)}>
  <input type="text" ref="username" onChange={this.onChange} className="form-control"/>
  <input type="text" ref="password" onChange={this.onChange} className="form-control"/>
  <button type="submit" className="btn-danger btn-sm">Search</button>
 </form>

输出图像附在这里