JonathanHayward JonathanHayward - 1 year ago 126
React JSX Question

How can a ReactJS form submission access field values?

I'm trying to make a form in ReactJS., for instance, tells how to create a UI element, where changing the value of the element will trigger XYZ where the object on which an event occurs has access to the input and therefore its comments.

Suppose that, within the same larger component, I have a TEXTAREA to enter data in, and a button to click to save it.

How do I do things right so that a click to the button creates a new blank record and initializes its "description" field to the content of the TEXTAREA?


Answer Source

There are many ways that you could do this. A naive implementation (ignoring flux and kin) would look like the following:

var React = require('react');

class Form extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {description: ''};
    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);

  onChange(e) {

  onSubmit(e) {
    fetch(this.props.formAction, {
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      body: JSON.stringify({
        description: this.state.description

    this.setState({description: ''});

  render() {
    return (
      <form action={this.props.action} method={this.props.method} onSubmit={this.onSubmit}>
        <textarea onChange={this.onChange} name="description">

Form.propTypes = {
  action: React.PropTypes.string.isRequired,
  method: React.PropTypes.string,

Form.defaultProps = {
  action: '/action/url',
  method: 'post',

module.exports = Form;

Use React’s Component methods setState to manage your application data. When onSubmit is called, prevent the browser default behavior with your ajax’d version of the same.

If using Flux, that fetch call would be an Action instead.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download