React 如何从输入字段中获取表单数据

Question

构造函数和函数：

 constructor(props) {
    super(props);

    this.state = {
        tagline: 'We rank what people are talking about.',
        year: new Date().getFullYear()
    };

    this.onFormSubmit = this.onFormSubmit.bind(this);
}

onFormSubmit(e) {
    console.log('onFormSubmit', e)
    console.log('this.state', this.state);
};

表格（为清楚起见删除了类名）：

 <form onSubmit={ this.onFormSubmit }>
    <div className="fl w100">
        <div>
            <input type="text" id="email" value={ this.state.email }/>
            <label htmlFor="email">Email</label>
        </div>
    </div>

    <div className="fl w100">
        <div>
            <input type="password" id="password" value={ this.state.password }/>
            <label htmlFor="password">Password</label>
        </div>
    </div>

    <button type="submit">
        Login
    </button>
</form>

这是注销的内容，注意没有电子邮件或密码信息：

完整的登录组件代码

---

import React from 'react';

class Login extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            tagline: 'We rank what people are talking about.',
            year: new Date().getFullYear()
        };

        this.onFormSubmit = this.onFormSubmit.bind(this);
    }

    onFormSubmit(e) {
        console.log('onFormSubmit', e)
        console.log('this.state', this.state);
    };

    render() {
        return (<div className="app">
            <div className="welcome">
                <header>
                    <div className="wikitags-logo">
                        <img src="imgs/wikitags-logo.png"/>
                    </div>
                    <h2>Admin Portal</h2>
                    <p>{ this.state.tagline }</p>
                </header>

                <section className="login-form">
                    <form onSubmit={ this.onFormSubmit }>
                        <div className="fl w100">
                            <div className="mdl-textfield mdl-js-textfield">
                                <input className="mdl-textfield__input" type="text" id="email" value={ this.state.email }/>
                                <label className="mdl-textfield__label" htmlFor="email">Email</label>
                            </div>
                        </div>

                        <div className="fl w100">
                            <div className="mdl-textfield mdl-js-textfield">
                                <input className="mdl-textfield__input" type="password" id="password" value={ this.state.password }/>
                                <label className="mdl-textfield__label" htmlFor="password">Password</label>
                            </div>
                        </div>

                        <button type="submit" className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                            Login
                        </button>
                    </form>
                </section>

                <footer>
                    &copy; { this.state.year } WikiTags
                </footer>
            </div>
        </div>);
    }
}

export default Login;

原文由 Leon Gaban 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

建议：

1. 您在输入字段中使用 value 属性，但没有定义 onChange 方法，因此您的输入字段将是 只读的， 因为状态值不会更新。

2. 您需要为所有输入字段定义一个 onChange 事件，或者通过删除 value 属性使它们成为不受控制的元素。

3. 在不受控元素的情况下，定义每个字段的引用并访问值使用 this.ref_name.value 。

通过定义 onChange 事件：

为每个输入元素定义名称属性（名称应与状态变量名称相同，这将有助于更新状态，我们可以在单个 onChange 函数中处理所有更改），如下所示：

 <input type="text" name='value' value={this.state.value} onChange={(e) => this.handleChange(e)} />

handleChange(e){
   this.setState({[e.target.name]: e.target.value})
}

通过不受控制的元素：

 <input type="text" ref={el => this.el = el} />

现在在 onSubmit 函数中使用 this.el.value 来访问这个输入字段的值。

检查此答案以供参考： https ://stackoverflow.com/a/43695213/5185595

原文由 Mayank Shukla 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您没有收到电子邮件或密码信息，因为您正在传递状态 console.log('this.state', this.state); 并且您没有为电子邮件和密码设置状态。

现在，你有两个选择：

1. 设置状态并从那里获取表单信息
2. 将输入值传递给处理信息的函数

对于选项 1，您需要为您的电子邮件和密码设置状态（尽管不建议为密码设置状态）和 onChange 输入事件处理程序。

设置您的 onChange 事件处理程序。

 <form onSubmit={ this.onFormSubmit }>
  <input type="text" id="email" onChange={this.handleEmailChange} value={ this.state.email } />

  <input type="password" id="password" onChange={this.handlePasswordChange} value={ this.state.password } />

  <button type="submit">
    Login
  </button>
</form>

以及设置 email 和 password 状态的函数。

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

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

并且不要忘记在构造函数中为您的 email 和 password 初始化状态并绑定函数。

 constructor(props) {
  super(props);

  this.state = {
    email: '',
    password: ''
  };

  this.handleEmailChange = this.handleEmailChange.bind(this);
  this.handlePasswordChange = this.handlePasswordChange.bind(this);
}

你完成了！ Then on the onFormSubmit function just access the email and password values from the state this.state.email and this.state.password and do随你喜欢。

现在对于选项 2，您只需传入输入的 event.target.value ，这些是电子邮件和密码的值，并将这些值传递给表单事件处理程序 onSubmit 函数，从那里你可以做任何你想做的事情（设置状态或更新电子邮件和密码，更改它们，等等）。

 <form onSubmit={ this.onFormSubmit }>
  <input type="text" id="email" name="theEmail" />

  <input type="password" id="password" name="thePassword" />

  <button type="submit">
    Login
  </button>
</form>

和 onFormSubmit 功能。

 onFormSubmit(event) {
  const email = event.target.theEmail.value;
  const password = event.target.thePassword.value;

  // do stuff
  console.log('Email:', email);
  console.log('Password:', password);
};

完成您想要做的事情的更简单和推荐的方法是选项 2。

请记住，您的应用处理的状态越少越好。

原文由 bntzio 发布，翻译遵循 CC BY-SA 3.0 许可协议