Instantly share code, notes, and snippets.

Embed
What would you like to do?
// 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;
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;
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'
/>
)
}
@masaya48

This comment has been minimized.

Show comment
Hide comment
@masaya48

masaya48 May 26, 2017

現在ランサーズの記事で拝見した現象と同じもので頭を悩ませています。
よろしければ、具体的にどのような変更をして解消したのか教えていただけませんでしょうか。

masaya48 commented May 26, 2017

現在ランサーズの記事で拝見した現象と同じもので頭を悩ませています。
よろしければ、具体的にどのような変更をして解消したのか教えていただけませんでしょうか。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment