0

Hello I'm making a simple form that takes a name and a message. On submit I would like it to email myself. I have set up the framework, but for some reason I can't type into the fields. Not sure what I'm missing here. Using onChange.

Form Code

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>
        )
    }
}

export default Contact;

1 Answer 1

1

Use this in handleChange method:

  this.setState({
        formValues
    });

instead of this:

  this.setState=({
        formValues
    });
Sign up to request clarification or add additional context in comments.

2 Comments

ahhh! thank you - will mark as the answer in 3 minutes when I can.
I'm glad I could help :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.