React Form

by Lucas Silva

HTML

<script src="https://unpkg.com/[email protected]/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<div id="root">
</div>

Babel + JSX

class Form extends React.Component {
	state = {
    fields: {
      name: '',
      email: ''
    },
    people: [],
  };

  onFormSubmit = (evt) => {
    const people = [...this.state.people,this.state.fields,];
    this.setState({ 
      people, 
      fields: {
        name: '',
        email: ''
      } 
    });
    evt.preventDefault();
  };

  onInputChange = (evt) => {
    const fields = this.state.fields;
    fields[evt.target.name] = evt.target.value;
    this.setState({ fields });
  };

	render () {
  	return (
    <div>
        <form onSubmit={this.onFormSubmit}>
          <input
            placeholder='Name'
            name='name'
            value={this.state.fields.name}
            onChange={this.onInputChange}
          />

          <input
            placeholder='Email'
            name='email'
            value={this.state.fields.email}
            onChange={this.onInputChange}
          />

          <input type='submit' />
        </form>

        <div>
          <h3>Pessoas</h3>
          <ul>
            { this.state.people.map(({ name, email }, i) =>
              <li key={i}>{name} ({ email })</li>
            ) }
          </ul>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Form />, document.getElementById('root'));