I have made a parent component that warp around a child component, and the child component wrap around the material UI Textfiled. The parent component will receive some values and a validation function from outside before passing to its Child. However , I wondering whether this is an efficient way to solve the problem, and also how to write the test code for it? Thanks(BTW, my apologize for the JSX code format, since it seems like the form doesn’t support it).
<
DefaultSingleRowInputText
Child={InputView}
hintText={‘Email Address’}
errorText={null}
floatingLabelText={‘Email Address’}
type={‘text’}
verificationFunction={isEmail}
/>
const DefaultSingleRowInputText=React.createClass({
getInitialState(){
return{
childText:’’,
errorText:’’
}
},
componentDidMount(){
if (this.props.errorText){
this.setState({
errorText: this.props.errorText
})
}
},
shouldComponentUpdate(nextProps, nextState){
if (nextProps !== this.props){
return true;
}
const {verificationFunction}=this.props;
const res=verificationFunction(this.state.childText);
if(!res.error){
if(this.props.setParentState)
this.props.setParentState(this.state.childText);
return false;
}
else if(!!res.error&&this.state.errorText!==res.error){
this.setState({
errorText: res.error
})
return true;
}
else
return false;
},
updateTextFromChild(newText){
this.setState({
childText:newText
})
},
render(){
let {Child,verificationFunction,setParentState,…other} =this.props;
return(
<
Child
{…other}
errorText={this.state.errorText}
updateTextFromChild={this.updateTextFromChild}
/>
)}
});
const {TextField,Styles}=MUI;
const {Colors}=Styles;
const InputView=({
hintText,
errorText=’’,
errorStyle,
floatingLabelText,
type,
updateTextFromChild
})=>{
return(
<TextField
hintText={hintText}
errorText={errorText}
floatingLabelText={floatingLabelText}
type={type}
underlineStyle={{borderColor:Colors.green500}}
underlineFocusStyle={{borderColor: Colors.amber900}}
onBlur={(evt)=>{
updateTextFromChild(evt.value)
}}
/>
)
};
function isEmail(value){
var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
var pass
err;
if (filter.test(value)) {
pass=true,
err=null;
}
else{
pass=false,
err=‘Please enter a valid email address.’;
}
return {
pass:pass,
error:err
}