// 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' | |
/> | |
) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
現在ランサーズの記事で拝見した現象と同じもので頭を悩ませています。
よろしければ、具体的にどのような変更をして解消したのか教えていただけませんでしょうか。