i need to pass parameters from child component to parent without event handler like onClick...
My parent component has a method and child component "A" every x second must pass parameters to parent's method. This methods change parent status and pass this value as props to another child component "B".
How can i do this??
this is my code:
var Parent = React.createClass({
getInitialState: function() {
return {
notification: [ {
data: "-",
message: "no notification to show",
type: "-"
} ]
};
},
handleNotification: function(res) {
var notification = this.state.notification;
notification.push(res);
this.setState({ notification: notification });
},
render: function() {
return(
<div>
<Child callFunction={this.handleNotification} />
<NotificationBox
notification={this.state.notification}
/>
</div>
);
}
});
var Child = React.createClass({
displayName: "Child",
handleReturnNotification: function(o) {
this.props.callFunction.bind(o);
},
render: function() {
var msg = "message:" ;
var o = {
data: "-",
message: msg,
type: "Alert"
};
this.handleReturnNotification.bind(this, o);
return (
<div></div>
);
}
});
Pass the parent method as a props. In child A do this.props.parentMethod(parameter);.
add function in useEffect(); to fire it onLoad
useEffect(() => {
props.callFunction()
}, [someVariable]);
Related
Hi everyone I just want some explanation about vue props data. So I'm passing value from parent component to child component. The thing is when parent data has data changes/update it's not updating in child component.
Vue.component('child-component', {
template: '<div class="child">{{val}}</div>',
props: ['testData'],
data: function () {
return {
val: this.testData
}
}
});
But using the props name {{testdata}} it's displaying the data from parent properly
Vue.component('child-component', {
template: '<div class="child">{{testData}}</div>',
props: ['testData'],
data: function () {
return {
val: this.testData
}
}
});
Thanks in advance
Fiddle link
This is best explained with a very simple example
let a = 'foo'
let b = a
a = 'bar'
console.info('a', a)
console.info('b', b)
When you assign...
val: this.testData
you're setting the initial value of val once when the component is created. Changes to the prop will not be reflected in val in the same way that changes to a above are not reflected in b.
See https://v2.vuejs.org/v2/guide/components.html#One-Way-Data-Flow
I resolve with! this.$set(this.mesas, i, event);
data() {
return { mesas: [] }
},
components: {
'table-item': table_l,
},
methods: {
deleteMesa: function(event) {
let i = this.mesas.map(item => item.id).indexOf(event.id);
console.log("mesa a borrare", i);
this.mesas.splice(i, 1);
},
updateMesa: function(event) {
let i =this.mesas.map(item => item.id).indexOf(event.id);
console.log("mesa a actualizar", i);
/// With this method Vue say Warn
//this.mesas[i]=event;
/// i Resolve as follow
this.$set(this.mesas, i, event);
},
// Adds Useres online
addMesa: function(me) {
console.log(me);
this.mesas.push(me);
}
}
I have method that changes data in itself, simple example:
Vue.component('component', {
template: '#component',
data: function () {
return {
dataToBeWatched: ''
}
},
methods: {
change: function (e) {
var that = this;
setTimeOut(function() {
that.dataToBeWatched = 'data changed';
}, 2000);
},
makeSmthWhenDataChanged: function () {
// ajax request when dataToBeWatched changed or when dataToBeWatched isn't empty
}
}
});
How to create such watcher using correct methods vue js?
Or I need to use props watching it in component?
Vue components can have a watch property which is an object. The object keys need to be the name of the prop or data that needs to be watched, and the value is a function that is invoked when the data changes.
https://v2.vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property
Vue.component('component', {
template: '#component',
data: function () {
return {
dataToBeWatched: ''
}
},
methods: {
change: function (e) {
var that = this;
setTimeOut(function() {
that.dataToBeWatched = 'data changed';
}, 2000);
},
makeSmthWhenDataChanged: function () {
// ajax request when dataToBeWatched changed or when dataToBeWatched isn't empty
}
},
watch: {
dataToBeWatched: function(val) {
//do something when the data changes.
if (val) {
this.makeSmthWhenDataChanged();
}
}
}
});
I am building a component within React. Everything seems to be working perfectly until I tried looping through a state.
Here is my component:
var BidItem = React.createClass({
getInitialState: function() {
return {
theMaxBid: '',
theHighestBids: ''
};
},
componentDidMount: function() {
var $component = this;
$.ajax({
type : "post",
dataType : "json",
url : myAjax.ajaxurl,
data : {action: "get_max_bid"},
})
.done(
function(response){
$component.setState({
theMaxBid: response.max_bid,
theHighestBids: response.highest_bids
});
}
);
},
render: function() {
var dd = [{ids:"2"}, {ids:"5"}];
var cc = this.state.theHighestBids;
console.log(cc);
console.log(dd);
return (
<div>
<p>Max Bid: {this.state.theMaxBid}</p>
</div>
)
}
});
This works, and within the render function both cc and dd output an array that looks like:
When I loop through the cc array (which comes from the state) within the render function:
{cc.map(function(result){
console.log(result);
})}
I get the following error:
Uncaught TypeError: cc.map is not a function
But when I loop through the below dd array, it works:
{dd.map(function(result){
console.log(result);
})}
Why can't I loop the state array?
The function componentDidMount get's ran after the first render call, so the initial render won't have this.state.theHighestBid (tip: highestBid). The first time render is ran this.state.theHighestBid returns '' which doesn't have the #map function.
Change getInitialState's to theHighestBid: [] and it will map through an empty array the first time, then call your AJAX when the component mounts, and then you'll get a response which will populate the state which will render a second time.
Why can't I loop the state array?
Because you don't have an array! theHighestBids: '' creates an empty string.
Change
getInitialState: function() {
return {
theMaxBid: '',
theHighestBids: ''
};
}
To
getInitialState: function() {
return {
theMaxBid: '',
theHighestBids: []
};
}
And make sure response.highest_bid is also an array.
I have this React component that looks like this:
var TestResult = React.createFactory(React.createClass({
displayName: 'test-result',
getInitialState: function getInitialState() {
return {
active: false,
testLines: [] //this value will update after AJAX/WebWorker completes
};
},
makeNewState: function makeState(data) {
this.setState(data);
},
componentDidMount: function () {
var self = this;
var testPath = this.props.testPath;
setTimeout(function(){
$.get(testPath).done(function (msg) {
var myWorker = new Worker('/js/workers/one.js');
myWorker.postMessage(msg);
myWorker.onmessage = function (msg) {
self.setState({testLines: msg.data.testLines});
};
}).fail(function (err) {
console.error(err);
});
}, Math.random()*2000);
},
render: function() {
var self = this;
return React.createElement('p', {
className: this.state.active ? 'active' : '',
onClick: this.clickHandler,
},
self.state.testName, ' ', self.state.testLines, React.createElement('b', null, 'Pass/fail')
);
}
}));
what I want is to render a variable number of components in the render function - the variable number is related to number of elements in the testLines array.
So, in order to do that, I might try changing the render method above:
render: function() {
var self = this;
return React.createElement('p', {
className: this.state.active ? 'active' : '',
},
self.state.testName, ' ', React.createElement('div', self.state.testLines, React.createElement('b', null, 'Pass/fail')
);
}
so what I am trying to do is pass testLines, which is an array of React.createElement results, to React.createElement. Is this the correct way of doing it? "It" meaning rendering a variable number of React elements.
What you have to do is map over the array and create each of the sub-elements, then render those:
render: function() {
var lines = this.state.testLines.map(function(line, i) {
// This is just an example - your return will pull information from `line`
// Make sure to always pass a `key` prop when working with dynamic children: https://facebook.github.io/react/docs/multiple-components.html#dynamic-children
return (
<div key={i}>I am a line!</div>
);
});
return (
<div id='lineContainer'>
{lines}
</div>
);
};
I have found a lot of resources, blogs, and opinions on how to fetch data for React and Flux, but much less on writing data to the server. Can someone please provide a rationale and some sample code for the "preferred" approach, in the context of building a simple edit form that persists changes to a RESTful web API?
Specifically, which of the Flux boxes should call $.post, where is the ActionCreator.receiveItem() invoked (and what does it do), and what is in the store's registered method?
Relevant links:
Should the action or store be responsible for transforming data when using React + Flux?
Should flux stores, or actions (or both) touch external services?
Where should ajax request be made in Flux app?
Short answer
Your form component should retrieve its state from Store, create "update" action on user inputs, and call a "save" action on form submit.
The action creators will perform the POST request and will trigger a "save_success" action or "save_error" action depending on the request results.
Long answer via implementation example
apiUtils/BarAPI.js
var Request = require('./Request'); //it's a custom module that handles request via superagent wrapped in Promise
var BarActionCreators = require('../actions/BarActionCreators');
var _endpoint = 'http://localhost:8888/api/bars/';
module.exports = {
post: function(barData) {
BarActionCreators.savePending();
Request.post(_endpoint, barData).then (function(res) {
if (res.badRequest) { //i.e response returns code 400 due to validation errors for example
BarActionCreators.saveInvalidated(res.body);
}
BarActionCreators.savedSuccess(res.body);
}).catch( function(err) { //server errors
BarActionCreators.savedError(err);
});
},
//other helpers out of topic for this answer
};
actions/BarActionCreators.js
var AppDispatcher = require('../dispatcher/AppDispatcher');
var ActionTypes = require('../constants/BarConstants').ActionTypes;
var BarAPI = require('../apiUtils/VoucherAPI');
module.exports = {
save: function(bar) {
BarAPI.save(bar.toJSON());
},
saveSucceed: function(response) {
AppDispatcher.dispatch({
type: ActionTypes.BAR_SAVE_SUCCEED,
response: response
});
},
saveInvalidated: function(barData) {
AppDispatcher.dispatch({
type: ActionTypes.BAR_SAVE_INVALIDATED,
response: response
})
},
saveFailed: function(err) {
AppDispatcher.dispatch({
type: ActionTypes.BAR_SAVE_FAILED,
err: err
});
},
savePending: function(bar) {
AppDispatcher.dispatch({
type: ActionTypes.BAR_SAVE_PENDING,
bar: bar
});
}
rehydrate: function(barId, field, value) {
AppDispatcher.dispatch({
type: ActionTypes.BAR_REHYDRATED,
barId: barId,
field: field,
value: value
});
},
};
stores/BarStore.js
var assign = require('object-assign');
var EventEmitter = require('events').EventEmitter;
var Immutable = require('immutable');
var AppDispatcher = require('../dispatcher/AppDispatcher');
var ActionTypes = require('../constants/BarConstants').ActionTypes;
var BarAPI = require('../apiUtils/BarAPI')
var CHANGE_EVENT = 'change';
var _bars = Immutable.OrderedMap();
class Bar extends Immutable.Record({
'id': undefined,
'name': undefined,
'description': undefined,
'save_status': "not saved" //better to use constants here
}) {
isReady() {
return this.id != undefined //usefull to know if we can display a spinner when the Bar is loading or the Bar's data if it is ready.
}
getBar() {
return BarStore.get(this.bar_id);
}
}
function _rehydrate(barId, field, value) {
//Since _bars is an Immutable, we need to return the new Immutable map. Immutable.js is smart, if we update with the save values, the same reference is returned.
_bars = _bars.updateIn([barId, field], function() {
return value;
});
}
var BarStore = assign({}, EventEmitter.prototype, {
get: function(id) {
if (!_bars.has(id)) {
BarAPI.get(id); //not defined is this example
return new Bar(); //we return an empty Bar record for consistency
}
return _bars.get(id)
},
getAll: function() {
return _bars.toList() //we want to get rid of keys and just keep the values
},
Bar: Bar,
emitChange: function() {
this.emit(CHANGE_EVENT);
},
addChangeListener: function(callback) {
this.on(CHANGE_EVENT, callback);
},
removeChangeListener: function(callback) {
this.removeListener(CHANGE_EVENT, callback);
},
});
var _setBar = function(barData) {
_bars = _bars.set(barData.id, new Bar(barData));
};
BarStore.dispatchToken = AppDispatcher.register(function(action) {
switch (action.type)
{
case ActionTypes.BAR_REHYDRATED:
_rehydrate(
action.barId,
action.field,
action.value
);
BarStore.emitChange();
break;
case ActionTypes.BAR_SAVE_PENDING:
_bars = _bars.updateIn([action.bar.id, "save_status"], function() {
return "saving";
});
BarStore.emitChange();
break;
case ActionTypes.BAR_SAVE_SUCCEED:
_bars = _bars.updateIn([action.bar.id, "save_status"], function() {
return "saved";
});
BarStore.emitChange();
break;
case ActionTypes.BAR_SAVE_INVALIDATED:
_bars = _bars.updateIn([action.bar.id, "save_status"], function() {
return "invalid";
});
BarStore.emitChange();
break;
case ActionTypes.BAR_SAVE_FAILED:
_bars = _bars.updateIn([action.bar.id, "save_status"], function() {
return "failed";
});
BarStore.emitChange();
break;
//many other actions outside the scope of this answer
default:
break;
}
});
module.exports = BarStore;
components/BarList.react.js
var React = require('react/addons');
var Immutable = require('immutable');
var BarListItem = require('./BarListItem.react');
var BarStore = require('../stores/BarStore');
function getStateFromStore() {
return {
barList: BarStore.getAll(),
};
}
module.exports = React.createClass({
getInitialState: function() {
return getStateFromStore();
},
componentDidMount: function() {
BarStore.addChangeListener(this._onChange);
},
componentWillUnmount: function() {
BarStore.removeChangeListener(this._onChange);
},
render: function() {
var barItems = this.state.barList.toJS().map(function (bar) {
// We could pass the entire Bar object here
// but I tend to keep the component not tightly coupled
// with store data, the BarItem can be seen as a standalone
// component that only need specific data
return <BarItem
key={bar.get('id')}
id={bar.get('id')}
name={bar.get('name')}
description={bar.get('description')}/>
});
if (barItems.length == 0) {
return (
<p>Loading...</p>
)
}
return (
<div>
{barItems}
</div>
)
},
_onChange: function() {
this.setState(getStateFromStore();
}
});
components/BarListItem.react.js
var React = require('react/addons');
var ImmutableRenderMixin = require('react-immutable-render-mixin')
var Immutable = require('immutable');
module.exports = React.createClass({
mixins: [ImmutableRenderMixin],
// I use propTypes to explicitly telling
// what data this component need. This
// component is a standalone component
// and we could have passed an entire
// object such as {id: ..., name, ..., description, ...}
// since we use all the datas (and when we use all the data it's
// a better approach since we don't want to write dozens of propTypes)
// but let's do that for the example's sake
propTypes: {
id: React.PropTypes.number.isRequired,
name: React.PropTypes.string.isRequired,
description: React.PropTypes.string.isRequired
}
render: function() {
return (
<li> //we should wrapped the following p's in a Link to the editing page of the Bar record with id = this.props.id. Let's assume that's what we did and when we click on this <li> we are redirected to edit page which renders a BarDetail component
<p>{this.props.id}</p>
<p>{this.props.name}</p>
<p>{this.props.description}</p>
</li>
)
}
});
components/BarDetail.react.js
var React = require('react/addons');
var ImmutableRenderMixin = require('react-immutable-render-mixin')
var Immutable = require('immutable');
var BarActionCreators = require('../actions/BarActionCreators');
module.exports = React.createClass({
mixins: [ImmutableRenderMixin],
propTypes: {
id: React.PropTypes.number.isRequired,
name: React.PropTypes.string.isRequired,
description: React.PropTypes.string.isRequired
},
handleSubmit: function(event) {
//Since we keep the Bar data up to date with user input
//we can simply save the actual object in Store.
//If the user goes back without saving, we could display a
//"Warning : item not saved"
BarActionCreators.save(this.props.id);
},
handleChange: function(event) {
BarActionCreators.rehydrate(
this.props.id,
event.target.name, //the field we want to rehydrate
event.target.value //the updated value
);
},
render: function() {
return (
<form onSubmit={this.handleSumit}>
<input
type="text"
name="name"
value={this.props.name}
onChange={this.handleChange}/>
<textarea
name="description"
value={this.props.description}
onChange={this.handleChange}/>
<input
type="submit"
defaultValue="Submit"/>
</form>
)
},
});
With this basic example, whenever the user edits a Bar item via the form in BarDetail component, the underlying Bar record will be maintained up to date locally and when the form is submitted we try to save it on the server. That's it :)
Components/Views are used to display data and fire events
Actions are tied to the events (onClick, onChange...) and are used to communicate with resources and dispatch events once the promise has been resolved or failed. Make sure you have at least two events, one for success and one for ajax failed.
Stores are subscribed to the events dispatcher is dispatching. Once data is received stores are updating the values which are stored and emitting changes.
Components/Views are subscribed to the stores and are re-rendering once the change has happened.
Should flux stores, or actions (or both) touch external services? approach is what seems natural to me.
Also there are cases when you need to trigger some action as a result of some other action being triggered, this is where you can trigger actions from a relevant store, which results store and views being updated.