对于用习惯了Vue的双向绑定后, 对React的双向绑定, 真心觉得蛋疼...
Vue的双向绑定, 只需要在data中初始化, 然后用v-model绑定即可, 简单省事...
再来看看React的:
var NoLink = React.createClass({
getInitialState: function() {
return {
message1: 'Hello!',
message2: 'Hello!'
};
},
handleChange1: function(event) {
this.setState({message1: event.target.value});
},
handleChange2: function(event) {
this.setState({message2: event.target.value});
},
render: function() {
var message1 = this.state.message1,
message2 = this.state.message2;
return (
<div>
<input type="text" value={message1} onChange={this.handleChange1} />
<input type="text" value={message2} onChange={this.handleChange2} />
</div>
);
}
})
从上面的代码, 可以看到React的双向绑定, 其实是用onChange
指定一个函数来修改state
里的值...
本来React有提供一个mixins: [React.addons.LinkedStateMixin]
来简化的, 但是在15版本后, 又取消了, 那么假如我有10个input需要绑定, 难道就写10个onChange函数? 能不能简化点呢? 其实也是可以的...
var NoLink = React.createClass({
getInitialState: function() {
return {
username: '',
password: '',
remember_me: ''
}
},
handleChange(type, event) {
this.setState({[type]: event.target.value})
},
render: function() {
const {username, password, remember_me} = this.state
return (
<div>
<input type="text" value={username} onChange={this.handleChange.bind(this, 'username')} />
<input type="text" value={password} onChange={this.handleChange.bind(this, 'password')} />
<input type="text" value={remember_me} onChange={this.handleChange.bind(this, 'remember_me')} />
</div>
)
}
})