I'm hoping you encounter the same issue of mine. I have react code that need a jquery event like (click, change). here is my code.
export default class SamplePreviewComponent extends React.Component<Props, any> {
constructor(props) {
super(props);
}
componentDidMount() {
this.renderChoiceButton();
}
renderChoiceButton() {
$("input.st").on("click", function() {
let value = $(this).val();
this.props.addDependentSample(value);
});
}
render() {
const { sampleTree } = this.props;
return (
<div className="row pl-1 pr-1 pt-0 mb-1">
<div className="columns bg-black20 pt-1 pb-1 border-radius-sm">
<div className="mb-1">
<p className="subheader">
<strong>
<small>SAMPLE #1</small>
</strong>
</p>
{sampleTree.root.label.trim().length > 0 && <h4>{sampleTree.root.label}</h4>}
{sampleTree.root.subLabel &&
sampleTree.root.subLabel.trim().length > 0 && (
<span className="subheader">
<small>
<strong>{sampleTree.root.subLabel}</strong>
</small>
</span>
)}
</div>
<div>
<div
dangerouslySetInnerHTML={{ __html: sampleTree.root.generatedHtml }}
className="red"
/>
</div>
</div>
</div>
);
}
}
if you check my return value of my component. there is dangerouslySetInnerHTML added. The output is like this
<div>
<div class="fancy-checkbox fancy-hover small mb-0">
<input type="checkbox" class="st" id="_0" name="17[]" value="1">
<label for="_0">1</label>
</div>
<div class="fancy-checkbox fancy-hover small mb-0">
<input type="checkbox" class="qt" id="_1" name="17[]" value="2">
<label for="_1">2</label>
</div>
</div>
When the user click the checkbox. I'm going to add and event using a jquery
renderChoiceButton() {
$("input.st").on("click", function() {
let value = $(this).val();
this.props.addDependentSample(value);
});
}
I get an error Cannot read property 'addDependentSample' of undefined. Maybe, because it comes from the react props and the jquery cannot read it. How can I add event using jquery that will connect the function to react?
There are a few ways you can resolve this error - a simple approach would be to store a reference to your component instance (ie componentInstance as shown below), and then access the component's props through that instance, like so:
renderChoiceButton() {
// Store reference to component for access in click handler
const componentInstance = this;
$('input.st').on('click', function() {
let value = $(this).val();
// Access props for the component via componentInstance
componentInstance.props.addDependentSample(value);
});
}
Related
I have a parent component where user can select skills from a range of options and a child component where user can add their own skill if its not available on the parent component.
The issue is in child component, when a user enters skill into an input element on which I have an #keydown.enter event defined to call a method, to take the input and push it to an array and that all works. The only problem is when keydown.enter event is fired it's also calling a method that is defined in the parent component which changes the state of the options element.
// parent component
<div class="card-body">
<p class="card-subtitle font-weight-bold mb-1">Select Skills</p>
<button
v-for="skill in skills"
:key="skill.id"
:class="[skill.state ? skillSelectedState : skillNotSelectedState]"
class="btn btn-sm m-2" #click="addSkill(skill)"
:value="skill.category">
{{skill.skills}}
</button>
<clientInput></clientInput> // child component
</div>
<script>
import clientInput from './ClientSkillInput.vue'
export default {
data() {
return {
skills: [], // getting skills from an axios call
selectedSkills: [],
}
}
}
methods: {
addSkill(skill) { // this is the method getting called
if (!skill.state) {
this.selectedSkills.push(skill.skills);
skill.state = true;
} else {
let position = this.selectedSkills.indexOf(skill.skills);
this.selectedSkills.splice(position, 1);
// skill.state = false;
}
},
}
// child component
<template>
<div class="form-group mt-2">
<label class="d-block">Not what you're looking for?</label>
<div class="customWraper">
<div class="userSkillbox d-inline bg-secondary"> // will be using v-for to loop on userProvidedSkills and show the user inputs
Rrby on rails
<button class="userSkillboxBtn btn-sm border-0 text-white"> // to remove the input item
<i class="fas fa-times"></i>
</button>
</div>
<input v-model="userInput" type="text" class="d-inline border-0" placeholder="Type to add different skill" #Click="">
</div>
</div>
</template>
<script>
export default {
data() {
return {
isEditable: true,
userInput: '',
userProvidedSkills: [],
}
},
methods: {
addUserInput() {
this.userProvidedSkills.push(this.userSkill);
this.userSkill = '';
}
}
}
</script>
It is not clear where you’re adding the keydown event, but there 2 possible solutions:
1.Use a event modifier on the input to stop propagation
<input #keydown.enter.stop
2.Use the self event modifier on the parent component button
<button
v-for="skill in skills"
#click.self="addSkill(skill)"
:value="skill.category">
{{skill.skills}}
More about event modifiers here
Not sure why I'm getting this error. I need to loop through the variations and find the id's containing the varid variables. To me this looks right but it's obviously not. I'm sure everyone here is much smarter than me though haha, I'm still very much a newbie at all this.
This function is supposed to allow me to filter down the state so that I have only the needed data and can display that within the page rather than the state containing all of my drupal products. Perhaps there's a more efficient way to do this also, I'm not sure.
Here's the code:
class ProductPage extends Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
dropdownOpen: false
};
}
toggle() {
this.setState(prevState => ({
dropdownOpen: !prevState.dropdownOpen
}));
}
render() {
let style = {
height: this.props.height - 56,
};
let product = this.props.products.items.find(o => o.path[0].alias === this.props.router.match.url);
console.log(product);
console.log(this.props.variations);
let variationList = [];
if (product && this.props.variations) {
for (let i = 0; i < product.variations.length; i++) {
let varid = product.variations[i].variation_id;
let variation = this.props.variations.find(o => o.path[0].alias === varid);
variationList.push(variation);
}
}
let body = product && product.body.length ? product.body[0].value : null;
return (
<div className="App" id="default">
<div className='MenuBar'>
<MenuBar/>
</div>
<div>
<div style={style} className="ProductPage row no-gutters">
<div className="col-xs-3 col-md-3">
<LeftMenuBar/>
</div>
<div className="outer col-xs-4 col-md-4">
<div>
<div id="ProductPlacement">
<img src={WomensWear} alt=""/>
<div id="alternate-pics">
<div id="alt-pic">
</div>
<div id="alt-pic">
</div>
<div id="alt-pic">
</div>
</div>
</div>
</div>
</div>
<div className="col-xs-5 col-md-5">
<div id="ImagePlacement">
<div className="ProductTitle">
<h1>First Product</h1>
</div>
<hr/>
<div className="ProductDescription">
<div dangerouslySetInnerHTML={{__html: body}} />
</div>
<div id="options">
<div id="color">
</div>
<div id="color2">
</div>
<div id="color3">
</div>
</div>
<div id="options">
<div>
<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle caret id="size-dropdown">
Size
</DropdownToggle>
<DropdownMenu>
<DropdownItem>1</DropdownItem>
<DropdownItem>3</DropdownItem>
<DropdownItem>5</DropdownItem>
</DropdownMenu>
</Dropdown>
<div className="AddToCart">
<button className="AddToCart">Add To Cart</button>
<button className="Price">$34.99</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default ProductPage;
I also ran into this issue and through trial and error discovered it was because of copy+paste. Check your reducer(s) to make sure you aren't setting a default of an object {} or other type, instead of an array [].
In my case I had (this is ES6 syntax by the way):
const someReducer = (state = {}, action) => {
switch (action.type) {
case 'reducer type':
// get the data etc.
return [];
default:
return state;
}
};
When I should have had:
const someReducer = (state = [], action) => {
switch (action.type) {
case 'reducer type':
// get the data etc.
return [];
default:
return state;
}
};
Notice the first line where I'm setting the default. This is used while the api calls are pending, so if it just happens to reach the code where .find() is being used then you'll get the error.
This is extremely easy to miss because data is retrieved so fast that you can't easily see when the data is the wrong type. Just make sure your default, however you're setting it, is the correct type! Hope that helps someone!
CSS and app breaks in Edge and Internet Explorer for the following code-
componentDidMount() {
const styles = require('./GettingStarted.scss');
document.getElementById('bodyTag').classList = '';
document.getElementById('bodyTag').classList.add(styles.GettingStartedContainerBody);
document.getElementById('content').classList.remove(styles.AppContainerBody);
document.getElementById('content').classList = '';
document.getElementById('content').classList.remove(styles.AppContainerBodyWithoutLogin);
}
componentWillReceiveProps(nextProps) {
if (!this.props.checked && nextProps.checked) {
let queryString = '';
const windowLocation = window.location.href;
const queryStringStartIndex = windowLocation.indexOf('?');
if (queryStringStartIndex > 0) {
queryString = windowLocation.substring(queryStringStartIndex,windowLocation.length);
}
if(nextProps.result[0].status === '0') {
browserHistory.push(config.BASE_URL + '/userdetail' + queryString);
} else if(nextProps.result[0].status === '1') {
browserHistory.push(config.BASE_URL + '/signuplogin' + queryString);
}
}
}
render() {
const { checking, checkingError, fields: {emailid}} = this.props;
const styles = require('./GettingStarted.scss');
const pmdLogo = require('../../../static/plexusmd-logo.png');
return (
<div className={styles.gettingStartedPage}>
<Helmet {...config.app.head} title="Getting Started | PlexusMD" />
<div className="gettingStartedForm margin-top-bottom-40">
<div className="headerLogoMenuContainer text-center margin-bottom-30">
<IndexLink className="brandlogo" to={config.BASE_URL + '/gettingstarted'} >
<img className="brand" src={pmdLogo} width="80" height="25" title={config.app.title} alt={config.app.title} />
</IndexLink>
</div>
<form className="form" onSubmit={this.handleSubmit} >
<h2 className="orange font22 text-left text-bold text-uppercase margin-top-0 margin-bottom-50 margin-left-right-20">Getting started</h2>
<div className="form-group">
<label htmlFor="password" className="control-label gray">What's your Email address?</label>
<div className="input-group">
<input type="text" id="emailid" name="emailid" ref="emailid" placeholder="Email address" value={this.props.emailid} className="form-control text-lowercase" {...emailid}/>
{!emailid.error && <span id="emailid" className="input-group-addon input-group-icon"><i className="icon ion-ios-checkmark-empty icon-size green"/></span>}
{ emailid.error && emailid.dirty && <div id="emailid" className="red smaller margin-0-auto">Enter a valid Email</div>}
</div>
</div>
<div className="form-group">
<div className="text-right">
{checkingError && <p className="loginError red text-left">{checkingError}</p>}
{!checking && <button className="btn btn-primary" onClick={this.handleSubmit.bind(this)} disabled={emailid.error}>NEXT
</button>}
{checking && <button className="btn btn-primary" disabled={checking}>WAIT</button>}
</div>
</div>
<div className="clear"></div>
</form>
</div>
<div className="clear"></div>
</div>
);
}
The background color is not updating in this page, as well as the input field is disabled i.e., cannot type into the field unless I remove the props in the <input> tag.
AppContainerBody and AppContainerBodyWithoutLogin css classes are inherited from app.scss. GettingStartedContainerBody classlist belongs to GettingStarted.scss
I am adding these classlists in almost every file in my React app. The app works fine in Chrome, Firefox and Safari but I get this error in console:
Unhandled promise rejection TypeError: Assignment to read-only properties is not allowed in strict mode
Link to the app and App.scss and GettingStarted.scss.
Versions:
React: 0.14.2
Edge: 40.15063.674.0
Move all require statements out of your functions to the top of your file.
So instead of calling const styles = require('./GettingStarted.scss'); in each functions you want to use your styles, only import it once.
Like:
require('./GettingStarted.scss');
// or
import './GettingStarted.scss';
classList cannot be changed directly. Use classList.add and classList.remove or change the attribute class via className = '' or .setAttribute( 'class', '' )
Also try to minimize DOM selections/code duplicates by saving a selection to a variable, e.g.:
const bodyTag = document.getElementById('bodyTag');
// further instructions for #bodyTag
const content = document.getElementById('content');
// further instruction for #content
I'm very new to reactjs and I've using AngularJS upto now. Currently i'm trying to learn reactjs.
I have a html code like this
<div class="status_bar">
<div>
<label class="status_head">Post as: John Smith</label>
<input class= 'post_data_input' placeholder="I'm seeking feedback for..."/>
.
<div class="status_down">
<button class="public_btn">Public</button>
<button class="post_btn">Post</button>
<img class='cam_btn' src="img/cam.png" alt=""/>
</div>
</div>
</div>
I want to save whatever typed in the input field to an array and access that data from the array to show somewhere else. How can I do this in reactjs?
Thanks inadvance.
you can get it by two ways , either:
1- assign ref value myInput to input , and retrieve it by this.refs.myInput.value
2 - IF you are getting value on firing its own event , retrieve it by event.target.value
SAMPLE :
class App extends React.Component {
constructor() {
super(...arguments);
this.state= {};
}
//Method-1 : this.refs.myInput.value
onClick() {
alert('You enter : '+this.refs.myInput.value);
}
// METHOD-2 : event.target.value
onKeyUp(event) {
const value = event.target.value;
this.setState({inputSize: value.length || ''})
}
render() {
return (<div class="status_bar">
<div>
<label class="status_head">Post as: John Smith </label>
<input ref="myInput" className= 'post_data_input' placeholder="I'm seeking feedback for..." onKeyUp={this.onKeyUp.bind(this)} />
.<label>{this.state.inputSize}</label>
<div className="status_down">
<button className="public_btn" onClick={this.onClick.bind(this)}>Public</button>
<button className="post_btn" onClick={this.onClick.bind(this)}>Post</button>
<img className='cam_btn' src="img/cam.png" alt=""/>
</div>
</div>
</div>)
}
}
// -- Mount component
ReactDOM.render(<App />, document.querySelector('section'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<section></section>
I have a searching system where user search by typing the place. If the place does not match, it should show not found and if place matches, it should show the place detail. What I did is
code
render() {
var margin = { marginTop : '13em' };
if (this.state.place){
let location = _.map(this.state.place, (place,id) => {
return(
<Room key={id}
slug={place.slug}
place={place.place}
city={place.city}
gallery={place.gallery}
property={place.property}/>
)
console.log('location',location);
});
let gallery = _.map(this.state.place, (place,id) => {
console.log('place',place.gallery);
_.map(place.gallery, (image,id) => {
return(
<img src={image.image} class="img-fluid" />
)
});
});
let noLocation = () => {
return(
<div className="noroom">There is no room</div>
);
console.log('nolocation');
};
return(
<div className = "container">
<div className="content text-align-center">
<div className="row text-xs-center">
<div className="middle-text" style={margin}>
<h1 className="welcome"><span>Common Rental Space</span></h1>
<p className="appSubtitle">facilitates your search for rental space all over Nepal</p>
<button ref="test" className="btn how-it-works" onClick={this.handleClick}>Search Space</button>
</div>
</div>
</div>
<div id="mySearch" className="overlay" onKeyDown={this.handleKeyDown}>
<button className="btn closebtn" onClick={this.handleClick}>x</button>
<div className="overlay-content">
<SearchInput ref="searchInput" className="search-input" onChange={this.searchUpdated} />
<div className="container searchList">
{ this.state.place > 1 ? {location} : {noLocation} }
</div>
</div>
</div>
</div>
);
}
}
}
What might be the error? The syntax is { condition ? true : false }
When I do {this.state.place >1 ? { location } : {noLocation} } I get an error
app.js:1030 Uncaught Invariant Violation: findComponentRoot(..., .0.1.1.1.0.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a> or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.
When I do this.state.place >1?{location}:{noLocation}i get this.state.place >1 ? result, and if place does not match the page shows this.state.place >1 ? :.
noLocation appears to be a method, but you aren't actually calling the method anywhere - so you are basically telling reaction to render the function itself, not the result of the method.
If it must be a method, try, noting the extra ():
{ this.state.place.length >=1 ? location : noLocation() }