I have a program which opens a dialog box on button click.
The dialog box contains : inputbox, submit and cancel button. I am just wondering how do I get the value of the input box after submitting the form. Posting code and Fiddle below.
JSBIN
<!DOCTYPE html>
<html>
<head>
<link href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="http://fb.me/react-0.3.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.3.0.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="component"></div>
<script type="text/jsx">
/** #jsx React.DOM */
var DialogContent = React.createClass({
render: function(){
return(
<div>
<form onSubmit={this.handleSubmit}>
<input ref="inputText" />
<input type="submit" />
<button onClick = {this.props.closeDialog}>Cancel</button>
</form>
</div>
)
}
});
var DialogExample = React.createClass({
openDialog: function(e){
e.preventDefault();
var $dialog = $('<div>').dialog({
title: 'Example Dialog Title',
width: 400,
close: function(e){
React.unmountAndReleaseReactRootNode(this);
$( this ).remove();
}
});
var closeDialog = function(e){
e.preventDefault();
$dialog.dialog('close');
}
React.renderComponent(<DialogContent closeDialog={closeDialog} />, $dialog[0])
},
render: function(){
return(
<button onClick= {this.openDialog}>Open Dialog</button>
)
}
});
React.renderComponent(<DialogExample />, document.getElementById('component'));
</script>
</body>
</html>
Note: I am new to reactjs.
try this:
var DialogContent = React.createClass({
handleSubmit: function(e){
e.preventDefault();
},
handleClick: function(){
console.log(this.refs.inputText.getDOMNode().value)
},
render: function(){
return(
<div>
<form onSubmit={this.handleSubmit}>
<input ref="inputText" />
<input type="submit" onClick={this.handleClick.bind(this)} />
<button onClick = {this.props.closeDialog}>Cancel</button>
</form>
</div>
)
}
});
instead of console.log, you can traverse the value upwards with a function received in props.
Related
I've been having a lot of problems recently trying to get my constructor work with my angular project so I created a test component. The code is supposed to toggle a message that says "hello test" by clicking a button. Please let me know why my constructor isn't responding.
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="app.component.js"></script>
</head>
<body>
<div ng-app="postEvent"
ng-controller="postCtrl">
<button> reg button test </button>
<button ng-click="toggle()"> toggle test </button>
<button ng-show="state"> state test </button>
</div>
</body>
// app.component.js
var postEvent = angular.module("postEvent", []);
postEvent.controller("postCtrl", function($scope) {
$scope.toggle = function () {
$scope.state = !$scope.state;
}
});
Remove
function ctrl($scope) {
}
which is unecessary here.
DEMO
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="postEvent" ng-controller="postCtrl"> <button ng-click="toggle()">test </button> <div ng-show="state" > hello test </div> </div>
<script type="text/javascript">
var postEvent = angular.module("postEvent", []);
postEvent.controller("postCtrl", function($scope) {
$scope.toggle = function () {
$scope.state = !$scope.state;
}
});
</script>
how to create a page with two reusable components and third "controller" component that will provide two-way communication with the first two.
Component 1 & 2 will be simple text boxes that will show the text value character count next to them. Component 3 will be a read-only textbox that will show the sum of the counts of 1&2.
Below is the code for the same.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="app.jsx"></script>
<meta charset="utf-8" />
</head>
<body>
<div id="container">
</div>
<div id="container2">
</div>
<input type="text" id="Final" name="finaltextbox"/>
<script type="text/babel">
var max_chars = 0;
var App =
React.createClass({
render: function() {
return (
<div> <TwitterInput /> </div>
);
}
});
var TwitterInput =
React.createClass({
getInitialState:
function() {
return {
chars_left: max_chars
};
},
handleChange(event) {
var input = event.target.value;
this.setState({
chars_left: input.length
});
},
render: function() {
return (
<div>
<textarea onChange={this.handleChange.bind(this)}></textarea>
<p> {this.state.chars_left}</p>
</div>
);
}
});
ReactDOM.render(
<App />,
document.getElementById('container')
);
ReactDOM.render(
<App />,
document.getElementById('container2')
);
</script>
</body>
</html>
I am new to AngularJS and I'm practicing with custom services. The following service is returning data, I checked it with an alert box, but data are not showing on page.
My HTML:
<html>
<head>
<title>Service Example</title>
<meta charset="utf-8" />
<script src="Scripts/angular.js"></script>
<script src="Scripts/app/app.js"></script>
</head>
<body ng-app="app1">
<form ng-controller="ServiceController">
<input ng-model="a" />
<input type="button" ng-click="getData()" value ="Show">
<br />
Square: <span ng-model="Square"></span> <br />
Cube: <span ng-model="Cube"></span>
</form>
</body>
My app.js file:
app = angular.module("app1", [])
.service('NumberService', function () {
this.square= function(a){return a*a; };
this.cube = function(a){return a * a * a; };
})
.controller('ServiceController', ['$scope','NumberService',
function ($scope, NumberService) {
$scope.getData = function () {
// alert('Button clicked' );
var n = $scope.a;
$scope.Square = NumberService.square(n);
alert($scope.Square);
$scope.Cube = NumberService.cube(n);
}
}
]);
You need to replace ng-model with ng-bind here. ng-modal is for two way binding. Hence It will not work here.
Square: <span ng-model="Square"></span> <br />
Cube: <span ng-model="Cube"></span>
To
Square: <span ng-bind="Square"></span> <br />
Cube: <span ng-bind="Cube"></span>
I Wrote A Peace Of Code Which If Works Expected To Get Profile Pic And User Name From GitHub API According To User Input. Console Also Not Showing Any Error.Can Any One Help Me Correct This Thanks In Advance .
This I What I Tried So Far
var Main = React.createClass({
getInitialState:function(){
return({
user:[]
});
},
addUser: function(loginToAdd) {
this.setState({user: this.state.logins.concat(loginToAdd)});
},
render: function() {
var abc = this.state.user.map(function(user){
return(
<Display user={user} key={user}/>
);
});
return (
<div>
<Form addUser={this.addUser}/>
{abc}
<hr />
</div>
)
}
});
var Form = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
var loginInput = React.findDOMNode(this.refs.login);
this.props.addUser(loginInput.value);
loginInput.value = '';
},
render:function(){
return (
<div onSubmit={this.handleSubmit}>
<input type="text" placeholder="github login" ref="login"/>
<button>Add</button>
</div>
)
}
});
var Display = React.createClass({
getInitialState:function(){
return{};
},
componentDidMount:function(){
var component = this;
$.get("https://api.github.com/users/"+this.props.user,function(data){
component.setState(data);
});
},
render: function() {
return (
<div>
<img src={this.state.avatar_url} width="80"/>
<h1>{this.state.name}</h1>
</div>
)
}
});
ReactDOM.render(<Main />, document.getElementById("app"));
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React JS</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div class="container">
<div id="app"></div>
</div>
<script src="demo.js" type="text/babel"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
</body>
</html>
JSBin Link
div do not have an onSubmit event form do however, fix that and you should be ok
Currently, I try to integrate an AngularJS app with React.
I use the following library https://github.com/davidchang/ngReact
By using watch-depth, I expect React component will re-render itself, when AngularJS's scope data is changing.
My code looks like this
index.html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/react/react.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/ngReact/ngReact.min.js"></script>
<script src="build/commentbox.js"></script>
</head>
<body>
<script>
var app = angular.module('myApp', ['react']);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
setTimeout(function() {
alert('assign data! how to trigger react component?');
$scope.data = {data : [
{author: "Pete Hunt", text: "This is one comment"},
{author: "Jordan Walke", text: "This is *another* comment"}
]};
}, 5000);
});
app.value('CommentBox', CommentBox);
</script>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
<react-component name="CommentBox" props="data" watch-depth="reference"/>
</div>
</body>
</html>
commentbox.js
// tutorial4.js
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
);
}
});
// tutorial10.js
var CommentList = React.createClass({
render: function() {
console.log("DEBUG");
console.log(this.props);
var commentNodes = this.props.data.map(function (comment) {
return (
<Comment author={comment.author}>
{comment.text}
</Comment>
);
});
return (
<div className="commentList">
{commentNodes}
</div>
);
}
});
// tutorial1.js
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.props.data} />
</div>
);
}
});
There's no difference, whether I'm using watch-depth="reference" or watch-depth="value". React component won't render itself, when value is assigned to $scope.data
Is there anything I had missed out?
Use $scope.data.push() to add new data and watch-depth="value"
It will re-render.