gistfile1.js

import React, {PropTypes} from 'react';
import debounce from 'lodash/function/debounce';
import AbstractSubstep from './AbstractSubstep';

export default class Story extends AbstractSubstep {
    static propTypes = {
        contents:    PropTypes.string,
        label:       PropTypes.string,
        placeholder: PropTypes.string,
        setStory:    PropTypes.func.isRequired,
    };

    static defaultProps = {
        editing:     false,
        placeholder: 'Write description...',
    };

    /**
     * Set the story for this step
     */
    setStory() {
        this.props.setStory(
            React.findDOMNode(this.refs.story).value
        );
    }

    render() {
        const attributes = {
            className:    'story--content-editable',
            defaultValue: this.props.contents,
            onChange:     debounce(this.setStory.bind(this), 250),
            placeholder:  this.props.placeholder,
            ref:          'story',
            disabled:     !this.state.editing,
            rows:         3,
        };

        return (
            <div className="form-group story">
                <label className="control-label">{this.props.label}</label>
                <div className="col-ld-8">
                    {this.renderPencil()}
                    <textarea {...attributes}></textarea>
                </div>
            </div>
        );
    }
}