I am currently building my first, very basic react app. There is a button that triggers an API call using onClick. However, react just doesn't seem to be rendering the onclick to the DOM.
Within index.js I have, among other, the following content:
<NumberSelect
label={"Can I get your number?"}
id_input1={"number-input"}
placeholder={42}
onClickEvent={RequestFact}
cta={"Get Fact"}
/>
This is my NumberSelect.js:
import Button from "./Button.js";
import InputNumber from "./InputNumber.js";
import "./NumberSelect.css";
const NumberSelect = (props) => {
return (
<form id="number-select">
<label htmlFor={props.id_input1}>{props.label}</label>
<InputNumber
placeholder={props.placeholder}
id_input1={props.id_input1}
/>
<Button
cta={props.cta}
class={"btn mt-10"}
href={props.href}
onClickEvent={props.onClickEvent}
/>
</form>
);
};
export default NumberSelect;
And this is the entire Button.js
import "./Button.css";
const Button = (props) => {
return (
<a
id={props.id}
className={props.class}
href={props.href}
onClick={props.onClickEvent}
>
{props.cta}
</a>
);
};
export default Button;
What I would expect the HTML to look like is this (note: is defined in a separate Component):
<form id="number-select">
<label for="number-input">Can I get your number?</label
><input
type="text"
inputmode="numeric"
pattern="[0-9]*"
id="number-input"
placeholder="42"
spellcheck="false"
data-ms-editor="true"
/><a class="btn mt-10" onclick="RequestFact()">Get Fact</a>
</form>
But this is what the HTML actually looks like:
<form id="number-select">
<label for="number-input">Can I get your number?</label
><input
type="text"
inputmode="numeric"
pattern="[0-9]*"
id="number-input"
placeholder="42"
spellcheck="false"
data-ms-editor="true"
/><a class="btn mt-10">Get Fact</a>
</form>
Almost everything is the same, only the onclick="RequestFact() is missing.
Can anybody help me out? Do you need any other info?
Thanks for your help!
Edit: I tried to simplify the code a bit and not post everything here. But it seems I took away too much and it became unclear. Sorry for that. Above some additional code.
Info regarding the additional questions:
RequestFact ist located in index.js
Thanks for the tip regarding { for strings - will implement
Related
I have react app with with complex component layout with multiple forms.
I know that placing one form inside another is not allowed. But I have a component which renders a form and must be placed inside my form. To prevent forms be rendered one inside another I use react portal.
But when I try to submit form rendered with portal, first form is also submitted that is unexpected. Looks like I miss something important.
How to prevent first form submit when submitting the second?
Thank you
Simplified example is here
import { createPortal } from "react-dom";
const Portal = ({ children, elm }) => createPortal(children, elm);
export default function App() {
return (
<div className="App">
<form
onSubmit={(e) => {
e.preventDefault();
alert("submit 1");
}}
>
First form <input type="text" value="1" />
<Portal elm={document.querySelector("body")}>
Second form{" "}
<form
onSubmit={(e) => {
e.preventDefault();
alert("submit 2");
}}
>
<input type="text" value="2" />
<input type="submit" value="submit 2" />
</form>
</Portal>
</form>
</div>
);
}
I had the same problem, as #EisaRezaei said in the first comment, using e.stopPropagation() in the form inside the portal, and submit type buttons, everything worked fine
While using
vee-validate#4.4.5
vue#3.1.4
I encountered following problem:
<Form #submit="onSubmit" :validation-schema="schema">
<div class="mb-3">
<label for="edit-email" class="form-label">E-mail</label>
<Field
id="edit-email"
class="form-control"
name="email"
type="text"
:validateOnInput="true"
/>
<ErrorMessage class="invalid-feedback" name="email" />
</div>
<button #click="checkEmail" type="button">Check e-mail address</button>
<!-- non-important part of the form -->
</Form>
I'd like to manually validate <Field /> when the button is clicked (error message should appear) and then I want to use the field's value to perform another action.
I wrote following code:
import { useFieldValue } from 'vee-validate';
// setup
setup() {
const schema = object({
email: string().required().email().label("e-mail"),
});
function verifyEmail(v) {
const emailValue = useFieldValue("email");
console.log(emailValue); // empty ComputedRefImpl
}
return {
schema,
verifyEmail,
};
},
}
And this doesn't work.
emailValue is returned as ComputedRefImpl with an undefined value.
I guess I'm mixing Components & Composition API flavors of vee-validate. But still don't know how to resolve this issue.
Created sandbox with this: https://codesandbox.io/s/vue3-vee-validate-form-field-forked-xqtdg?file=/src/App.vue
Any help will be much appreciated!
According to vee-validate's author:
https://github.com/logaretm/vee-validate/issues/3371#issuecomment-872969383
the useFieldValue only works as a child of a useForm or useField.
So it doesn't work when <Field /> component is used.
I'm following this tutorial and any time it references an input element it defines them as so:
{{input type="text action='actionname'... }}
I'm told this is out of date and indeed the docs don't use that format, instead using this format:
<input type="text" {{action 'actionname' ... }}
I'm at the point of the tutorial where I'm saving data to the store. I've amended the tutorial to use angle brackets instead of curly braces like so:
<input type="text" value={{model.name}} class="form-control" placeholder="The name of the Library" />
<input type="text" value={{model.address}} class="form-control" placeholder="The address of the Library" />
<input type="text" value={{model.phone}} class="form-control" placeholder="The phone number of the Library" />
<button type="submit" class="btn btn-default" {{action 'saveLibrary' model}}>Add to library list</button>
My route looks like:
import Route from '#ember/routing/route';
export default Route.extend({
model() {
return this.store.createRecord('library');
},
actions: {
saveLibrary(newLibrary) {
newLibrary.save().then(() => this.transitionTo('libraries'));
},
willTransition() {
this.controller.get('model').rollbackAttributes();
}
}
});
When I call the route action saveLibrary and open the debugger, newLibrary doesn't have any data from the model properties. Whenever I change the handlebars template to use curly braces like the tutorial, it works fine; newLibrary contains name, address & phone.
What is the syntax for using angle brankets and having it propagate to route.js?
The angle bracket component should be <Input> not <input>.
So I’ve spent the last few weeks learning react and now I’m trying to do so with firebase.
Right now, I am trying to make it possible to edit and delete a blog post. I’ve made a few similar things over the last few weeks with express, rails etc so I thought I got a pretty good handle on it so right now I’m trying to compare and know the differences between them.
Most of the functions have been easily refactored to work with what I’m doing now so I’m not sure exactly how to tweak this one to work here or if it won’t work at all which would then turn to how do I properly do it here.
The original code I used last time that I tried to edit for this was:
getInitialState(){
return {editable: false}
},
handleEdit(){
if( this.state.editable){
var title = this.refs.title.value;
var article= this.refs.article.value;
var id = this.props.post.id;
var post = {id: id, title: title, article: article};
this.props.handleUpdate(post);
}
this.setState({editable: !this.state.editable})
},
render: function(){
var title= this.state.editable? <input className= "form-control" type='text' ref='title' defaultValue={this.props.post.title}/>:
<h3>{this.props.post.title}</h3>;
var article= this.state.editable ? <input className= "form-control" type='text' ref='article' name="logEntryEdit" defaultValue={this.props.post.article}/>:
<p className="postText">{this.props.post.article}</p>;
return(
<div >
<div className="text-center postTitle">
{title}
</div>
<hr/>
<br/>
<div className="text-center" id="postText">
{article}
</div>
<br/>
<hr/>
<button className="btn btn-danger delete-button" onClick={this.props.handleDelete}>Delete</button>
<button className="btn btn-primary" onClick={this.handleEdit}>{this.state.editable ? 'Submit' : 'Edit'}</button>
</div>
)
Naturally I edited the item names and such. How I set up my edit page was by first passing the selected post via the id that firebase generates into a single view page and then pass it in into the edit page. The delete should be from that view page as well.
This is the edit where I tried to put in the above function:
constructor(props){
super(props);
this.state = {
title: '',
body: '',
post:{},
};
}
componentDidMount(){
database.ref(`posts/${this.props.match.params.postId}`)
.on('value', snapshot => {
this.setState({post: snapshot.val()});
});
this.postId= this.props.match.params.postId;
}
//edit function goes here
render() {
return (
<div className="container">
<form onSubmit={this.onHandleUpdate}>
<div className="form-group">
<input value={this.state.post && this.state.post.title} className="form-control" type="text" name="title" ref="title" placeholder="Title" onChange={this.onInputChange}/>
</div>
<br/>
<div className="form-group">
<input value={this.state.post && this.state.post.body} className="form-control" type="text" name="body" ref="body" placeholder="Body" onChange={this.onInputChange}/>
<br/>
</div>
<button className="btn btn-success">Submit</button>
</form>
</div>
);
}
When I tried adding it in I also got a
A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component
It linked me to the docs which I went over as well.
Can you please tell me how to make the original code I had fit in and work for this time or how it is supposed to be done so I can compare and understand the difference?
This error stems from the fact that you are stating that the input fields are updated via a this.onInputChangefunction and yet that function is not defined anywhere. This means there is no way to update the inputs and react does not like that. either define your this.onInputChange function or switch to using refs (when you use ref react call that an uncontrolled component).
From couple of days,I am struggling to get tirx-change event fired when trix-editor's content changes.But not able to figure out the issue.I am using react js for view.
Below is my code :
class Desc extends React.Component {
handleChangeTrix(event){this.setState({[event.target.description.name]:
event.target.description.value});
}
render(){
return(
<div className="container-fluid">
<form onSubmit = {this.handleSubmit.bind(this)}
className="form-horizontal" >
<input id="description"
name="description"
className="form-control"
value={this.state.description}
hidden="True" type="hidden">
</input>
<trix-editor trix-change={this.handleChangeTrix.bind(this)}
classname="trix-content"
input="description"
placeholder="Start typing here...." >
</trix-editor>
<button type="submit">submit</button>
</form>
</div>);
}
}
If you feel some details are missing please ask in comment.If you feel question is inappropriate and deserve a down vote,i would love to know mistake via your valueable comment.
Thanks in advance.
you call setState was wrong. It should be changed to
handleChangeTrix(event){this.setState({description:
event.target.description.value});