javascript - react 表单无法识别键入的输入

标签 javascript forms reactjs render jsx

您好,我正在制作一个简单的表单,其中包含名称和消息。提交后我希望它通过电子邮件发送给我自己。我已经设置了框架,但由于某种原因我无法在字段中输入内容。不知道我在这里缺少什么。使用 onChange。

表单代码

import React, { Component, PropTypes } from 'react'


class Contact extends Component {
    constructor(props) {
        super(props)
        this.state = {
            formValues: {
                name: '',
                message: ''
            }
        }
    }

    handleChange(event) {
        let formValues = this.state.formValues;
        let name = event.target.name;
        let value = event.target.value;

        formValues[name] = value;
        this.setState=({
            formValues
        });
    }

    handleSubmit(event) {
        event.preventDefault();
        console.log("NEW FORM VALUES " + this.state.formValues.name + " " + this.state.formValues.messsage);

        const {name, message} = this.formValues;
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit.bind(this)}>
                    <label>Name:
                        <input type="text" name="name" placeholder="Name" value={this.state.formValues["name"]} onChange={this.handleChange.bind(this)} />
                    </label> <br />
                    Message: <br />
                        <textarea type="text" name="message" placeholder="Message..." value={this.state.formValues["message"]} onChange={this.handleChange.bind(this)}></textarea> <br />
                    <input type="submit" value="Submit" /> 
                </form>
            </div>
        )
    }
}

导出默认联系人;

最佳答案

handleChange方法中使用它:

  this.setState({
        formValues
    });

而不是这个:

  this.setState=({
        formValues
    });

关于javascript - react 表单无法识别键入的输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42657787/

相关文章:

javascript - 使用 jQuery 导航 <tr> 中的数据

javascript - 当按钮被禁用时,jQuery 脚本在 safari 中不起作用

javascript - 在使用 jQuery 发布之前通过链接单击填充表单

html - 在没有 photoshop 的情况下创建统一的提交、保存、取消按钮

reactjs - 如何使用自定义 jss 插入点在 material-ui 中配置 makeStyles Hook ?

javascript - 如果我想在 React 中使用像 AOS 这样的 javascript 库,该怎么做?

javascript - 在 Javascript 中删除子 div

javascript - 序列化和反序列化函数

javascript - 为什么当所有函数都是 future 时,第三个函数不会在 pipeK 中被调用?

javascript - ReactJS - 使用 iframe 静默更新 token