Question

在AngularJS中我可以做到：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
    Name: <input ng-model="firstname">
    <h1>{{firstname}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstname = "John";
    $scope.lastname = "Doe";    
});
</script>

</body>
</html>

在React中执行此操作的等效方法是什么？这是我尝试过的：

var app = document.getElementById("app");



var Main = React.createClass({
  getInitialState: function(){
    return {text: ""};
  },
  change: function(e){
    var newValue = e.target.value;
    this.setState({text: newValue});
  },
  render: function(){
    return (
      <div>
        <input onChange={this.change} type="text"/>
        <h1>{this.state.text}</h1>
      </div>
      );
  }
});


React.render(<Main />, app);

这是实施此方法的最佳方式吗？
这种方式似乎有点慢。你能建议另一种方式吗？

反应中的双向绑定，如AngularJS

0 个答案: