88
rated 0 times
[
95]
[
7]
/ answers: 1 / hits: 148440
/ 8 Years ago, fri, march 4, 2016, 12:00:00
Lets say I have a view component that has a conditional render:
render(){
if (this.state.employed) {
return (
<div>
<MyInput ref=job-title name=job-title />
</div>
);
} else {
return (
<div>
<MyInput ref=unemployment-reason name=unemployment-reason />
<MyInput ref=unemployment-duration name=unemployment-duration />
</div>
);
}
}
MyInput looks something like this:
class MyInput extends React.Component {
...
render(){
return (
<div>
<input name={this.props.name}
ref=input
type=text
value={this.props.value || null}
onBlur={this.handleBlur.bind(this)}
onChange={this.handleTyping.bind(this)} />
</div>
);
}
}
Lets say employed is true. Whenever I switch it to false and the other view renders, only unemployment-duration is re-initialized. Also unemployment-reason gets prefilled with the value from job-title (if a value was given before the condition changed).
If I change the markup in the second rendering routine to something like this:
render(){
if (this.state.employed) {
return (
<div>
<MyInput ref=job-title name=job-title />
</div>
);
} else {
return (
<div>
<span>Diff me!</span>
<MyInput ref=unemployment-reason name=unemployment-reason />
<MyInput ref=unemployment-duration name=unemployment-duration />
</div>
);
}
}
It seems like everything works fine. Looks like React just fails to diff 'job-title' and 'unemployment-reason'.
Please tell me what I'm doing wrong...
More From » reactjs
