I attached dropdown items to my form group input field (image below). When I add onChange() key in order to get its value, I cannot write anything to input field. But when I remove onChange() key, it is working, I am able to write anything, but I need to get the value of input field. Is there any other way than onChange() key or any solution? Thank you in advance :)
Here is the my code:
<Form.Control
ref={ref}
onClick={e => {
e.preventDefault();
onClick(e);
}}
size="sm"
type="text"
className="search-or-jump shadow-none"
placeholder="Search or jump to..."
onChange={event => setSearchName(event.target.value)}
/>
{children}
</Form.Group>
You have to add value attributes, like
<Form.Control
ref={ref}
onClick={e => {
e.preventDefault();
onClick(e);
}}
size="sm"
type="text"
className="search-or-jump shadow-none"
placeholder="Search or jump to..."
value={searchName}
onChange={event => setSearchName(event.target.value)}
/>
{children}
</Form.Group>
Your code didn't have value attribule but you called 'value' on 'onChange' that why your code didn't work.
Related
I'm new to JavaScript and already go through similar questions. I create an input mask for phone number where it has the region code in the form. However, it saves in the database together with the region code. How can I remove special character from an input form? For example:
(+60)123456789 --> 0123456789
I have this block of code where the input form goes:
<div className="mt-4">
<InputMaskComponent
id="company_phone_no"
mask="+(60)999999999999"
label="Company Phone Number"
value={(formState.company_phone_no || '').replace(/[^a-zA-Z0-9 ]/g, '')}
variant="standard"
onChange={handleChange}
>
</InputMaskComponent>
</div>
I try to use the replace() but still cannot managed to get it right. I already have this mask.js component:
export default function InputMaskComponent({id,mask,value,onChange,label,variant}) {
return (
<InputMask
id={id}
name={id}
mask={mask}
maskChar=""
value={value}
onChange={onChange}
>
{()=> <TextField fullWidth id={id} name={id} label={label} variant={variant} />}
</InputMask>
);
}
Basically I'm not able to make date input empty with Formik. I just want it to show nothing initially. This is what I've been dealing for hours.
<Field
name="date"
type="date"
className={`InformationForm__field text-[20px] lg:h-14 px-4 lg:py-4 py-3 outline- none
`}
/>
note: I've tried placeholder, giving empty string as initial value etc.
Anyone have idea?
Yo can try below code
<Field
name="date"
render={({ field, form: { isSubmitting } }) => (
<input {...field} type="date"
placeholder="date" />
)}
/>
Check this link for more info:- https://formik.org/docs/api/field#render
Searching on docs I've found this prop initialValues, try that one.
Reference
I am using React date-picker for my form. Currently it's working well, but the user can delete the date and enter whatever values. How do I restrict it?
This is my code:
import DatePicker from "react-datepicker";
<DatePicker
name="invoiceDate"
className="form-control form-control-sm"
type="text"
size="sm"
placeholder=""
selected={date}
minDate={new Date()}
value={values.setDate}
onChange={datePickerChange}
dateFormat="dd/MM/yyyy"
/>
Just add this line of code to DatePicker :
onKeyDown={(e) => {
e.preventDefault();
}}
After adding this event, your component's code will be like the below code :
<DatePicker
name="invoiceDate"
className="form-control form-control-sm"
type="text"
size="sm"
placeholder=""
selected={date}
minDate={new Date()}
value={values.setDate}
onChange={datePickerChange}
dateFormat="dd/MM/yyyy"
onKeyDown={(e) => {
e.preventDefault();
}}
/>
I think onBeforeInput should be used in this case, as opposed to onKeyDown.
So just simply:
onBeforeInput={(e) => {
e.preventDefault();
}}
The reason being, that onKeyDown prevents a lot of 'normal' functionality from working when the input is focused. E.g.:
Page reload with CTRL + R
Opening devtools with F12
Going to the next input with Tab
And in case of ReactDatePicker, the customInput property has to be used to pass in an input that has onBeforeInput overridden as explained.
i have a problem with use onChange method inside a Controller tag from react-hook-form. I need capture when the user select a field to render a new one downside, with information relationship in the last one.
Im using react-hook-form with MUI
<FormControl>
<InputLabel>Universidad</InputLabel>
<Controller
as={
<Select placeholder="Universidad">
{universities.map((item, i) => {
return (
<MenuItem value={item.value} key={i}>
{item.label}
</MenuItem>
);
})}
</Select>
}
name="university"
control={control}
onChange={([event]) => {
console.log(event.target.value);
}}
defaultValue=""
/>
</FormControl>
So I have to implement a form in modal, as you can see, the button in the modal are not the buttons in the form. I created the form as a child component of the modal. How can I submit the form using the button in the parent component. I am using React Semantic-UI react as my UI framework.
I think if I can hide the button in the form and trigger it using JavaScript. I think this might be achieved via getElementById, but is there a react way of doing it?
My current Modal looks like this:
<Modal open={this.props.open} onClose={this.props.onClose} size="small" dimmer={"blurring"}>
<Modal.Header> Edit Activity {this.props.name} </Modal.Header>
<Modal.Content>
<ActivityInfoForm/>
</Modal.Content>
<Modal.Actions>
<Button negative onClick={this.props.onClose}>
Cancel
</Button>
<Button positive
content='Submit'
onClick={this.makeActivityInfoUpdateHandler(this.props.activityId)} />
</Modal.Actions>
</Modal>
My form code looks like this:
<Form>
<Form.Group widths='equal'>
<Form.Input label='Activity Name' placeholder='eg. CIS 422' />
<Form.Input label='Activity End Date' placeholder='Pick a Date' />
</Form.Group>
<Form.Group widths='equal'>
<Form.Input label='Total Capacity' placeholder='eg. 30' />
<Form.Input label='Team Capacity' placeholder='eg. 3' />
</Form.Group>
</Form>
The simplest solution would be to use HTML form Attribute
Add "id" attribute to your form: id='my-form'
<Form id='my-form'>
<Form.Group widths='equal'>
<Form.Input label='Activity Name' placeholder='eg. CIS 422' />
<Form.Input label='Activity End Date' placeholder='Pick a Date' />
</Form.Group>
<Form.Group widths='equal'>
<Form.Input label='Total Capacity' placeholder='eg. 30' />
<Form.Input label='Team Capacity' placeholder='eg. 3' />
</Form.Group>
</Form>
Add the appropriate "form" attribute to the needed button outside of the form: form='my-form'
<Button positive form='my-form' content='Submit' value='Submit' />
What does your makeActivityInfoUpdateHandler function look like?
I assume you did it by the following way, and just continue adding more code to make it work for you:
1/ Add ref to your Form, then you can access the Form in the parent (Modal):
<Modal>
<Modal.Content>
<ActivityInfoForm ref="activityForm" />
</Modal.Content>
</Modal>
2/ Then in the makeActivityInfoUpdateHandler function:
makeActivityInfoUpdateHandler = (activityId) => {
// ...
this.refs.activityForm.getWrappedInstance().submit();
// ...
}
The above code is the way you should do, please post here some more details in case this doesn't work yet!
===========
EDITED VERSION BELOW: (after discussion with the author, and we together found a good way around!):
The idea now is put the ref on a button (this button has type="submit", and it belongs to the form), then when the button outside is clicked, we just need to call the "click()" function of the ref button [which is a smart thinking from the author himself]
(Actually, component from semantic-ui is a modified and improved version, no longer the standard form, so my previous way above may not work when it tries to submit the form, however, the below way will work)
The code will now look like:
1/ Add ref to the button on the form:
<Form onSubmit={ this.handleSubmit} >
<button style={{}} type='submit' ref={ (button) => { this.activityFormButton = button } } >Submit</button>
</Form>
2/ Then in the makeActivityInfoUpdateHandler function, trigger click() of the above button:
makeActivityInfoUpdateHandler = (activityId) => {
// ...
this.activityFormButton.click();
// ...
}
The selected answer was useful. But the method in it doesn't seem to work any longer. Here's how I went about it.
You can give a ref to the child component when it is being created.
<ChildComponent ref={this.childComponent}/>
And use it in the button's onClick method. (This is the code for the button)
<Button variant= "light" onClick={this.onClick}>
Submit
</Button>
(This is the onClick method)
onClick = (event) => {
this.childComponent.current.handleSubmit(event);
}
I'm calling a method in the child component called handleSubmit. It can look like this.
handleSubmit = (event)=> {
event.preventDefault();
//Your code here. For example,
alert("Form submitted");
}