React 可选择性的使用自有 state 或者 props 元件

Question

我想做一个如果有props有value传入，就使用props的value，没有传入的话，就使用自有状态的元件代码如下
DEMO:https://stackblitz.com/edit/r...
importReactfrom'react';
exportdefaultclassMyInputextendsReact.Component{
constructor(props){
super(props);
this.state={
value:(typeofthis.props.value==='string')?this.props.value:''
}
}
componentWillReceiveProps(nextProps){
if((typeofthis.props.value==='string')?this.props.value:''){
this.setState({value:nextProps.value})
}
}
handleChange=(e)=>{
if(this.props.onChange){
this.props.onChange(e);
}else{
this.setState({value:e.target.value});
}
}
handleClick=(e)=>{
if(this.props.onClick){
this.props.onClick(e);
}else{
}
}
render(){
return
}
}
但我认为这样的代码有点冗长，似乎考虑不周，请问有没有这种元件的比较好的写法可以推荐呢？

Answer 1

首先，不要在constructor()方法中，使用this.props，这个写法在IE下无法兼容。其次，componentWillReceiveProps()方法，将会废弃。可以做如下的修改：render(){const{value=this.state.value}=this.props;return}你的需求是项目中最常见的使用方式:importReactfrom'react';exportdefaultclassMyInputextendsReact.Component{constructor(props){super(props);this.state={value:''};}handleChange=(e)=>{if(this.props.onChange){this.props.onChange(e);}else{this.setState({value:e.target.value});}}handleClick=(e)=>{if(this.props.onClick){this.props.onClick(e);}else{}}render(){const{value=this.state.value}=this.props;return}}