One of React's very powerful features is the ability to pass functions as props:
<Counter getText={count => `Count: ${count}`} />
In Counter's render method it can call this function with a count:
render() {
const {getText} = this.props
const {count} = this.state
return <div className="counter">{getText(count)}</div>
}
Of course HTML has a syntax for event handler functions...
<p id="demo" onclick="myFunction()">Click me to change my text color.</p>
but the arguments the function is called with are hard-coded. I'm wondering if a web component can be given a function attribute that it can call with any arguments it wants?
yes you can.
onclick="myFunction()"
should be
onclick="myFunction.bind(this,arguementsGoHere)"
Related
I have question regarding the lit-html render function.
Currently I have the problem that sometimes the render function does not update the DOM.
My render function looks like this:
public renderLootbag = (_characterItems: Object): void => {
//some other code
const lootbagInventoryTemplate: TemplateResult[] = [];
for (let i: number = 0; i < numberOfInventorySpaces; i++) {
lootbagInventoryTemplate.push(html`
<section class="lootbag__inventoryItem">
//some other code
</section>
`)
};
const lootbagTemplate: TemplateResult = html`
//some other code
<section class="lootbag__inventory">${lootbagInventoryTemplate}
</section>
`;
console.log(lootbagInventoryTemplate);
render(lootbagTemplate, getLootbagContainer);
}
This function gets triggerd everytime I click on a button called "open Lootbag"
Now the problem is: if the value of the parameter in the renderLootbag() function changes, the DOM doesn´t get updated, eventhough the console.log(lootbagInventoryTemplate) shows me the new values ... :/.
img of the console.log
img of the dom
Note: in this case the Element with the class "lootbag__itemData" shouldn´t be filled with content.
Is there a way to completly force a new render?, I have already tried to empty my container with innerHTML and then call the render function but that didn´t work.
Thanks in advance
I had a similar problem with an Input that didnt update all the time.
The undelying problem was that i converted all inputs from the user to number and if the user typed some letters it would fall back to zero.
Since the values didn't change always (zero changed to zero), lit html wouldn't rerender.
The Solution was using a directive.
import { html, render, directive } from "lit-html";
const value = store.savedValueFromInput;
const forceWrite = directive((someValue) => (part) => {
part.setValue(someValue);
});
<input type="number" #change="${setValueFromInput}" .value="${forceWrite(value)}" />
That should force a re-render.
Best regards,
Tristan
I'm trying to use react-autosuggest as it is designed to be, for me, the method signature of renderSuggestion should contain the actual theme, so we can use variables from the theme in our styling
Here's my workaround, but I just want to be sure I'm not making something uselessly complex:
<AutoSuggest
renderSuggestion={createRenderSuggestion(this.props.classes)}
/>
the variable this.props.classes is populated at the component creation
withStyles(styles)(ShopSuggestBox)
an I had to define a method within a method to get access to the actual theme
const createRenderSuggestion = theme => suggestion => {
console.log("setting css of name:", theme.itemName)
return (
<div>
<div className={theme.itemName}>
{suggestion.name}
</div>
<div className={theme.itemInfo}>
NYC
</div>
</div>
)
}
Just to be sure to be clear: when I attempt to access to the theme within the method function renderSuggestion(suggestion, { query, isHighlighted }) i can't
Have a look at https://material-ui.com/customization/themes/#accessing-the-theme-in-a-component.
You could also use withStyles(styles, { withTheme: true })(ShopSuggestBox); if you don't want to compose.
Either way the theme is then accessible in the props of you ShopSuggestBox.
My component template have an img
<img src="img/loading.gif" :data-src="url" class="live-snapshot-img" :class="{lazy:true, 'lazy-loaded': false}">
When it rendered, I'll trigger out the lazy event. The class will changed to 'lazy-loaded' from 'lazy'.
<img src="img/loading.gif" :data-src="url" class="live-snapshot-img lazy-loaded">
Then if the data changed, I want the class change back to 'lazy'. The bind:class doesn't work.
My solution is
Create a method in component
lazyload: function() {
var clazz = {lazy: true, 'lazy-loaded': false}
clazz['dummy' + Math.random()] = true
return clazz
},
and change the img to
<img src="img/loading.gif" :data-src="url" class="live-snapshot-img" :class="lazyload()">
I think you're approaching this in slightly the wrong way. You have the right idea, but I feel like your thinking and jQuery post render dom manipulation manner, not that this is bad, just not right for this situation. Vue works a little differently. If you want to change the class after the event in this particular instance, you bind your :class to a variable in your vue component.
If I wanted to make this happen, I would probably start by setting a variables in my component data for the state. (see: Class and Style Bindings)
Vue.component('my-component-name', {
data: function () {
return {
imageState: {'lazy': true, 'lazy-loaded': false}
}
}
})
Then bind that to your element:
<img src="img/loading.gif" :data-src="url" class="live-snapshot-img" :class="imageState">
You can then manipulate the imageState in your component methods in any way you want.
I am just a beginner in reactjs. I feel so good about using it, but I have been stuck for a while on a concept that I wanna implement, that would solve me whole lot of other issues.
Concept
I want to create a form component that can have dynamic children passed to it. It won't be a specific form component like LoginForm, ContactForm etc. Rather it would just be Form.
Approach 1
class LoginPage extends Rect.Component {
constructor(props) {
super(props)
this.submit = this.submit.bind(this);
this.validate = this.validate.bind(this);
this.reset = this.reset.bind(this);
}
submit(...args) {
this.refs.form.submit(args);
}
validate(...args) {
this.refs.form.validate(args);
}
reset(...args) {
this.refs.form.reset(args);
}
render() {
return (
<LoginPage>
<Form ref="form" onSubmit={this.submit}>
<Input value="email" pattern="/email_pattern/" onValidate={this.validate} />
<Input value="password" pattern="/password_pattern/" onValidate={this.validate} />
<Button value="submit" action={this.submit} />
<Button value="reset" action={this.reset} />
</Form>
</LoginPage>
}
}
Input onChange calls the validate function that just passes on the args to the Form's validate function. For the Form to know if all it's children's are validated. I pass isValid and targetInputComponent as args to the form.
Button Submit onClick calls the submit function likewise and LoginPage (acts as middleware) passes the call to the Form component. Form check it's state for inValid inputs etc.
Button Reset onClick call is passed to the Form component likewise. But how do the form handle this reset functionality? Input's value is controlled by LoginPage. Form can't change the input's value.
Aproach 2
What I did was add the input's data and validity to the LoginPage state. Now both Form and Inputs just call the Login Page to update it's state. Form and Inputs components are using this state as prop.
class LoginPage extends React.Component {
constructor(props) {
super(props)
this.state = {
formSchema: this.initSchema()
}
this.validateField = this.validateField.bind(this);
this.submitForm = this.submitForm.bind(this);
}
initSchema() {
const formSchema = {
email: {
isValid: false,
value: ''
},
password: {
isValid: false,
value: ''
},
password2: {
isValid: false,
value: ''
}
}
return formSchema;
}
validateField(dataObj, targetComponent) {
const formSchema = Object.assign(this.state.formSchema, dataObj);
this.setState({ formSchema })
}
submitForm(isSuccess) {
console.log(isSuccess);
console.log('Form Submit: ', this.state.formSchema);
throw new Error('Submition Error');
}
reset() {
// Loop through each object in formSchema and set it's value to empty, inputs will validate themselves automatically.
}
render() {
return <div>
<Form ref="formLogin" className="auth-form" onSubmit={this.submitForm} formSchema={this.state.formSchema}>
<h1>
Switch Accounts
</h1>
<Input type="email" name="email" onValidate={this.validateField} value={this.state.formSchema.email.value}
isValid={this.state.formSchema.email.isValid}/>
<Input type="password" name="password" onValidate={this.validateField} value={this.state.formSchema.password.value}
isValid={this.state.formSchema.password.isValid}/>
<Button value="Submit" type="submit" />
</Form>
</div>
}
}
Problem
This approach is making the LoginPage Component quite messy. How will the LoginPage component will handle the forms if I have more than 1 form on the page? There will be even more features to LoginPage like Lists, Grid, Modals etc. This LoginPage shouldn't Handle these situations. Form should be responsible for all the inputs, submition, etc functionality. This form component should be generic to all types of forms. I don't want to create feature forms like LoginForm, ContactForm, etc.
The solution to this issue will aid me a lot in whole lot of other components.
Your approach 2 is the standard way of handling this problem.
Why wouldn't you create a separate <LoginForm>? Doing so can abstract the fields and validation away from other unrelated functionalities on your page.
If later you need a <ContactForm> or any other type of form, it will have different fields and different validation logic, meaning you'll need to build it out regardless.
Short of using something like redux, you're on the right track.
There are numerous ways to make ‘generic’ forms. But in my opinion it is best to keep the forms seperatly.
The reason why I say this, is because one way or another, you still have to implement various validation condition for most fields, such as e-mailaddress or what ever you will use.
I think the best approach is to make the components individual. For example: make a TextField component that handles input stuff like validation. Maybe a Button component for submit and callbacks.
So my advise: keep the forms seperatie. No need to overthink and lose useful time in trying to make things ‘pretty’.
Goodluck!
Originally, I had it working fine.
Then I did this and now I can't get it to work
ClipboardField.js
import React from 'react';
export default (props) => {
return(
<div id="clip" data-clipboard-text={props.code} onClick={props.onClick}>
<p> Copy to clipboard.</p>
</div>
);
}
Field.js
class DashWizardTwoCore extends Component {
componentDidMount(){
const btns = document.getElementById('clip');
const clipboard = new Clipboard(btns);
}
componentDidUpdate() {
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
}
render(){
const someCode = "const foo = 1"
return (
<div>
<ClipboardField code={this.someCode} /> }
</div>
);
}
}
If you take the code out of ClipboardField and into Field it works. It's mostly, how do I use document.getElementById() in my parent component to find something in my child?
Their examples:
https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-selector.html#L18
https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-node.html#L16-L17
https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-nodelist.html#L18-L19
Your code is fine you just have a few issues:
you are binding clipboard.on in componentDidUpdate which won't trigger here since you are not really changing anything (in the ClipboardField component) that triggers this event.
You are passing {this.someCode} in the code prop which would be undefined should just be {someCode}
So it's just a matter of moving your clipboard.on to the componentDidMount right after the new Clipboard and use code={someCode}
https://jsfiddle.net/yy8cybLq/
--
In React whenever you want to access the actual dom element of your component we use what react calls as refs, I would suggest you do this rather than using getElementById as this is the "best practice".
However stateless components (like your ClipboardField component above) can't have refs so you just need to change it to be a normal component.
Here's a fiddle with your code but using refs instead: https://jsfiddle.net/e5wqk2a2/
I tried including links to the react docs for stateless components and refs but apparently don't have enough "rep" to post more than 2 links, anyways quick google search should point you in the right direction.
I adjusted your code and created a simple integration of clipboard.js with React.
Here's the fiddle: https://jsfiddle.net/mrlew/ehrbvkc1/13/ . Check it out.