您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生
8.双向数据流
发布时间：2025-02-20 22:57:13编辑：雪饮阅读（）
-
什么是双向绑定，这里一个完整的示例告诉你，在这里你在输入框input中输入的内容会实时响应到h1标签中被绑定状态的文本中。
完整示例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="bower_components/react/react.development.js"></script>
<script src="bower_components/react/react-dom.development.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
class EasyFormComponent extends React.Component{
constructor(props){
super(props);
this.state = {
message: 'react is awesome!',
isReactAwesome:true
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e){
this.setState(
{
message: e.target.value
}
)
}
render(){
return (
<div>
<h1>我想说:{this.state.message}</h1>
<h2>React是不是很好用?{this.state.isReactAwesome?'非常好用':'一般般...'}</h2>
<input type="text" onChange={this.handleChange}/>
</div>
);
}
}
ReactDOM.render(<EasyFormComponent />, document.getElementById('app'));
</script>
</body>
</html>
那么同样的道理，我们可以让check类型的input的checked属性进行双向绑定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="bower_components/react/react.development.js"></script>
<script src="bower_components/react/react-dom.development.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
class EasyFormComponent extends React.Component{
constructor(props){
super(props);
this.state = {
message: 'react is awesome!',
isReactAwesome:true
};
this.handleChange = this.handleChange.bind(this);
this.handleCheckBoxChange = this.handleCheckBoxChange.bind(this);
}
handleChange(e){
this.setState(
{
message: e.target.value
}
)
}
handleCheckBoxChange(e){
console.log("e",e);
console.log("e.target",e.target);
this.setState(
{
isReactAwesome: e.target.checked
}
)
}
render(){
return (
<div>
<h1>我想说:{this.state.message}</h1>
<h2>React是不是很好用?{this.state.isReactAwesome?'非常好用':'一般般...'}</h2>
<input type="text" value={this.state.message} onChange={this.handleChange}/>
<input type="checkbox" checked={this.state.isReactAwesome} onChange={this.handleCheckBoxChange} />
</div>
);
}
}
ReactDOM.render(<EasyFormComponent />, document.getElementById('app'));
</script>
</body>
</html>
那么，同样可以传递至子组件乃至孙组件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="bower_components/react/react.development.js"></script>
<script src="bower_components/react/react-dom.development.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
class EasyFormComponent extends React.Component{
constructor(props){
super(props);
this.state = {
message: 'react is awesome!',
isReactAwesome:true
};
this.handleChange = this.handleChange.bind(this);
this.handleCheckBoxChange = this.handleCheckBoxChange.bind(this);
}
handleChange(e){
this.setState(
{
message: e.target.value
}
)
}
handleCheckBoxChange(e){
console.log("e",e);
console.log("e.target",e.target);
this.setState(
{
isReactAwesome: e.target.checked
}
)
}
render(){
return (
<div>
<h1>我想说:{this.state.message}</h1>
<h2>React是不是很好用?{this.state.isReactAwesome?'非常好用':'一般般...'}</h2>
<ChildComponent handleChange={this.handleChange} message={this.state.message} isReactAwesome={this.state.isReactAwesome} handleCheckBoxChange={this.handleCheckBoxChange}/>
</div>
);
}
}
//子组件
class ChildComponent extends React.Component{
constructor(props){
super(props);
}
render(){
return (
<div>
<h3>我是子组件</h3>
<GrandchildrenComponent handleChange={this.props.handleChange} message={this.props.message} isReactAwesome={this.props.isReactAwesome} handleCheckBoxChange={this.props.handleCheckBoxChange}/>
</div>
);
}
}
//孙子组件
class GrandchildrenComponent extends React.Component{
constructor(props){
super(props);
}
render(){
return (
<div>
<h4>我是孙组件</h4>
<input type="text" value={this.props.message} onChange={this.props.handleChange}/>
<input type="checkbox" checked={this.props.isReactAwesome} onChange={this.props.handleCheckBoxChange} />
</div>
);
}
}
ReactDOM.render(<EasyFormComponent />, document.getElementById('app'));
</script>
</body>
</html>
那么可以看到在孙组件与主组件的中间代也就是子组件（爸爸代）传递props的值写法很冗余，其实当组件属性名和属性值的语法相同时候，可以用哒哒哒语法来简化，如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="bower_components/react/react.development.js"></script>
<script src="bower_components/react/react-dom.development.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
class EasyFormComponent extends React.Component{
constructor(props){
super(props);
this.state = {
message: 'react is awesome!',
isReactAwesome:true
};
this.handleChange = this.handleChange.bind(this);
this.handleCheckBoxChange = this.handleCheckBoxChange.bind(this);
}
handleChange(e){
this.setState(
{
message: e.target.value
}
)
}
handleCheckBoxChange(e){
console.log("e",e);
console.log("e.target",e.target);
this.setState(
{
isReactAwesome: e.target.checked
}
)
}
render(){
return (
<div>
<h1>我想说:{this.state.message}</h1>
<h2>React是不是很好用?{this.state.isReactAwesome?'非常好用':'一般般...'}</h2>
<ChildComponent handleChange={this.handleChange} message={this.state.message} isReactAwesome={this.state.isReactAwesome} handleCheckBoxChange={this.handleCheckBoxChange}/>
</div>
);
}
}
//子组件
class ChildComponent extends React.Component{
constructor(props){
super(props);
}
render(){
return (
<div>
<h3>我是子组件</h3>
<GrandchildrenComponent {...this.props} />
</div>
);
}
}
//孙子组件
class GrandchildrenComponent extends React.Component{
constructor(props){
super(props);
}
render(){
return (
<div>
<h4>我是孙组件</h4>
<input type="text" value={this.props.message} onChange={this.props.handleChange}/>
<input type="checkbox" checked={this.props.isReactAwesome} onChange={this.props.handleCheckBoxChange} />
</div>
);
}
}
ReactDOM.render(<EasyFormComponent />, document.getElementById('app'));
</script>
</body>
</html>
这种语法，其实就像是这样，它从对象里面的key自动映射到组件的props上，如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="bower_components/react/react.development.js"></script>
<script src="bower_components/react/react-dom.development.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
class EasyFormComponent extends React.Component{
constructor(props){
super(props);
this.state = {
message: 'react is awesome!',
isReactAwesome:true
};
this.handleChange = this.handleChange.bind(this);
this.handleCheckBoxChange = this.handleCheckBoxChange.bind(this);
}
handleChange(e){
this.setState(
{
message: e.target.value
}
)
}
handleCheckBoxChange(e){
console.log("e",e);
console.log("e.target",e.target);
this.setState(
{
isReactAwesome: e.target.checked
}
)
}
render(){
return (
<div>
<h1>我想说:{this.state.message}</h1>
<h2>React是不是很好用?{this.state.isReactAwesome?'非常好用':'一般般...'}</h2>
<ChildComponent handleChange={this.handleChange} message={this.state.message} isReactAwesome={this.state.isReactAwesome} handleCheckBoxChange={this.handleCheckBoxChange}/>
</div>
);
}
}
//子组件
class ChildComponent extends React.Component{
constructor(props){
super(props);
}
render(){
return (
<div>
<h3>我是子组件</h3>
<GrandchildrenComponent {...{aa:'1111',bb:'3333'}} />
</div>
);
}
}
//孙子组件
class GrandchildrenComponent extends React.Component{
constructor(props){
super(props);
}
render(){
return (
<div>
<h4>我是孙组件</h4>
<input type="text" value={this.props.aa} />
<input type="text" value={this.props.bb} />
</div>
);
}
}
ReactDOM.render(<EasyFormComponent />, document.getElementById('app'));
</script>
</body>
</html>
那么如果被解构的是数组，就会将props以数组方式去绑定元素咯，如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="bower_components/react/react.development.js"></script>
<script src="bower_components/react/react-dom.development.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
class EasyFormComponent extends React.Component{
constructor(props){
super(props);
this.state = {
message: 'react is awesome!',
isReactAwesome:true
};
this.handleChange = this.handleChange.bind(this);
this.handleCheckBoxChange = this.handleCheckBoxChange.bind(this);
}
handleChange(e){
this.setState(
{
message: e.target.value
}
)
}
handleCheckBoxChange(e){
console.log("e",e);
console.log("e.target",e.target);
this.setState(
{
isReactAwesome: e.target.checked
}
)
}
render(){
return (
<div>
<h1>我想说:{this.state.message}</h1>
<h2>React是不是很好用?{this.state.isReactAwesome?'非常好用':'一般般...'}</h2>
<ChildComponent handleChange={this.handleChange} message={this.state.message} isReactAwesome={this.state.isReactAwesome} handleCheckBoxChange={this.handleCheckBoxChange}/>
</div>
);
}
}
//子组件
class ChildComponent extends React.Component{
constructor(props){
super(props);
}
render(){
return (
<div>
<h3>我是子组件</h3>
<GrandchildrenComponent {...[11,22,333]} />
</div>
);
}
}
//孙子组件
class GrandchildrenComponent extends React.Component{
constructor(props){
super(props);
console.log("this.props",this.props);
}
render(){
return (
<div>
<h4>我是孙组件</h4>
<input type="text" value={this.props[0]} />
<input type="text" value={this.props[1]} />
<input type="text" value={this.props[2]} />
</div>
);
}
}
ReactDOM.render(<EasyFormComponent />, document.getElementById('app'));
</script>
</body>
</html>
关键字词：双向