构造函数和函数:

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;

最佳答案

建议:

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

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

3. 在不受控元素的情况下，定义每个字段的 ref 并使用 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

关于javascript - React 如何从输入字段中获取表单数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43697550/