app_text_field.js

## app_text_field.js
// components/common/app_text_field.js

// @flow
import React, { Component } from 'react';
import TextField from 'material-ui/TextField';

class AppTextField extends Component {

    constructor(props: any) {
        super(props);
        this.state = { value: props.value }
    }

    state: { value: any; }

    componentWillUpdate(nextProps: any, nextState: any) {
        if (this.props.value !== nextProps.value && nextProps.value !== nextState.value) {
            this.setState({ value: nextProps.value });
        }
    }

    onChange(event: any) {
        this.setState({
            value: event.target.value,
        });
        if (this.props.onChange) {
            this.props.onChange(event);
        }
    }

    props: {
        onChange?: Function;
        value?: any;
    }

    render() {
        const override = {
            value: this.state.value,
            onChange: this.onChange.bind(this),
        };
        return <TextField {...this.props} {...override} />;
    }
}

export default AppTextField;

## foo_text_field.js
import React, { Component } from 'react';
import AppTextField from 'components/common/app_text_field';

class FooTextField extends Component {

    // snip

    render() {
        return <AppTextField {...this.props} {...override} />;
    }
}

export default FooTextField;

## 呼び出し.js
import React from 'react';
import { Field } from 'redux-form';
import FooTextField from 'components/foo_text_field';

const renderInput = (field: Object): React.Element<*> => <FooTextField {...field.input} />;

// snip

    render () {
        return (
            <Field
                name='foobar'
                component={renderInput}
                floatingLabelText='foobar'
            />
        )
    }