I'm trying to set a radio button to default checked using the following:
import { Field } from "redux-form";
<Field name={radio_name} component={renderField} type="radio" checked={true} value={val1} label="val1"/>
<Field name={radio_name} component={renderField} type="radio" value={val2} label="val2"/>
<Field name={radio_name} component={renderField} type="radio" value={val3} label="val3"/>
const renderField = ({
input,
label,
type
}) =>
(
<div>
<input {...input} type={type}/>
<label>{label}</label>
</div>
);
However, there's no checked property in the resulting element. Anyone know why?
You didn't use the checked prop:
const renderField = ({ input, label, type, checked }) => (
<div>
<input {...input} type={type} checked={checked} />
<label>{label}</label>
</div>
);
Related
In the below form component how can we hide the certain input components ?
#1 how can we pass display: none to certain component?
#2 tried to set the state and mount but throwing errors while rendering.
const inputStyle = {
display:none
}
and pass the style = {inputStyle} to effect certain components
is there any effective way to condtionally render the below form and hide the different components for different domains?
import React from 'react'
class ClassComponentForm extends React.Component {
state = {}
componentDidMount(){
this.setState(emptyForm)
}
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
})
}
render(){
return(
<div id='classComponentForm'>
<h2>
Please Enter Your Information - Class
</h2>
<form id='form'>
<label htmlFor='nameInput'>
Name:
</label>
<input
id='nameInput'
name='name'
type='text'
placeholder='Please type your name'
value={this.state.name}
onChange={(e) => this.handleChange(e)}
/>
<label htmlFor='emailInput'>
Email:
</label>
<input
id='emailInput'
name='email'
type='text'
placeholder='Please type your email'
value={this.state.email}
onChange={(e) => this.handleChange(e)}
/>
<label htmlFor='zipcodeInput'>
Zipcode:
</label>
<input
id='zipcodeInput'
name='zipcode'
type='text'
placeholder='Please type your zipcode'
value={this.state.zipcode}
onChange={(e) => this.handleChange(e)}
/>
<label htmlFor='dateInput'>
Date:
</label>
<input
id='dateInput'
name='date'
type='date'
value={this.state.date}
onChange={(e) => this.handleChange(e)}
/>
</form>
</div>
)
}
}
export default ClassComponentForm
handleChange setup keys inside state object based on input name (because of e.target.name) which you defined in the input element. You already access this value inside the value prop
value={this.state.email}
The same thing can be used to conditionally hide each input. This is an example of how you can hide email input.
{this.state.email && <input
id='emailInput'
name='email'
type='text'
placeholder='Please type your email'
value={this.state.email}
onChange={(e) => this.handleChange(e)}
/>}
The form campaignid input value is automatically filled in when the page is loaded. When I click on the other fields, it reset to default.
What can I do to prevent default and preserve my campaignid input value?
I'm using a third party script to get URL parameters and insert them into campaignid value.
import { Button, FormControl, Input } from "#chakra-ui/react";
import { Field, Form, Formik } from "formik";
import Script from "next/script";
export default function FormikExample() {
return (
<>
<Script src="https://cdn.jsdelivr.net/gh/gkogan/sup-save-url-parameters/sup.min.js" />
<Formik
initialValues={{
name: "",
}}
onSubmit={(values) => {
setTimeout(() => {
fetch(`https://hooks.zapier.com/hooks/catch/3660927/bte5w77/`, {
method: "POST",
body: JSON.stringify(values, null, 2),
}),
3000;
});
}}
>
{(props) => (
<Form id="hero">
<Field name="name">
<FormControl>
{({ field }) => <Input {...field} type="text" id="name" />}
</FormControl>
</Field>
<Field name="email">
<FormControl>
{({ field }) => <Input {...field} type="email" id="email" />}
</FormControl>
</Field>
<Field name="campaignid">
{({ field }) => (
<FormControl isReadOnly>
<Input {...field} type="hidden" value="" id="campaignid" />
</FormControl>
)}
</Field>
<Button id="submited" isLoading={props.isSubmitting} type="submit">
Submit
</Button>
</Form>
)}
</Formik>
</>
);
}
You need to prevent the default of the submit form.
Use prevent default on your submit function, it will stop that behaviour. More info: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
e.preventDefault()
I've been trying to make a form where, depending on a switch button, renders one or two different inputs.
My code looks like this:
const Test = () => {
const [switchButton, setSwitch] = React.useState(true)
const handleSwitch = () => {setstate(!switchButton)}
return <>
<Switch checked={switchButton} onClick={() => handleSwitch} />
{!switchButton ?
<>
<label htmlFor="input_1">Input 1</label>
<input id="input_1"/>
</>
:
<>
<label htmlFor="input_2">Input 2</label>
<input id="input_2" />
<label htmlFor="input_3">Input 3</label>
<input id="input_3" />
</>
}
</>
}
export default Test;
My issue happens when I enter characters into one input and then switch them: The same characters are shown on my new rendered input. Example here.
Why does this happen? I'm really lost
use keys for the elements, so it will not be recognized as the same element as react tries to map elements on each rerender if they were already rendered before.
so react sees: 1 input and than 2 inputs and thinks the first input is the same as before.
const Test = () => {
const [switchButton, setSwitch] = React.useState(true)
const handleSwitch = () => setSwitch((switch) => !switch)
return (
<>
<Switch checked={switch} onClick={handleSwitch} />
{!switchButton ? (
<React.Fragment key="key1">
<label htmlFor="input_1">Input 1</label>
<input id="input_1"/>
</>
) : (
<React.Fragment key="key2">
<label htmlFor="input_2">Input 2</label>
<input id="input_2" />
<label htmlFor="input_3">Input 3</label>
<input id="input_3" />
</>
)}
</>
)}
export default Test;
but anyway it would be better to use a controlled input. something like this:
const [value, setValue] = React.useState(true)
<input value={value} onChange={(e) => setValue(e.target.value)}/>
export const DefaultColumnFilter11 = ({
column: {
filterValue,
setFilter,
preFilteredRows: { length },
},
}) => {
const [condVal, setcondVal] = useState("");
return (
<div>
<input
type="radio"
value=">"
name="cond"
onChange={(event) => setcondVal(event.target.value)}
/>{" "}
<
<br />
<input
type="radio"
value="<"
name="cond"
onChange={(event) => setcondVal(event.target.value)}
/>
>
<br />
<Input
value={filterValue|| ""}
onChange={(e) => {
setFilter( {condVal} && (e.target.value || undefined));
}}
placeholder={`${length}`}
/>
</div>
);
};
This is the code and I want to filter the column using radio button condition greater than ">" and less than "<" that should be applied to the input search.
Essentially I have some data that I would like to filter using radio buttons.
Selecting a button of a particular value should only cause those objects with that value as their property to be rendered.
i want to add a validation in an input field when user enters a value onKeyDown event. The validation is that my input must contain at least on Character and a least one number. The validation texts must be enabled or disabled when the validations are true. Also if the user backspaced and the text is not containg at least one value or one number the validations must be enabled. I've set the internal state with two flag. My question is how my validation function must be?
Code:
const InputField = props => (
<div className="input-row">
<input
{...props.input}
type={props.type}
className="form-control input-box__input"
placeholder={props.placeholder}
value={props.value}
defaultValue={props.defaultValue}
defaultChecked={props.defaultChecked}
disabled={props.disabled}
onChange={props.onChange}
onKeyDown={this.onKeyDown}
checked={props.checked}
/>
{props.meta.touched && props.meta.error &&
<span className="error">
{props.intl.formatMessage({ id: props.meta.error }) }
</span>}
</div>
);
const onKeyDown = (e) => {
// Add logic here
}
}
please check the following link
https://jsfiddle.net/69z2wepo/201010/
it has the following code:
class Hello extends React.Component {
state = {hasError:false};
onChange(event){
if(event.target.value.match(/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/)){
this.setState({hasError:false});
}else{
this.setState({hasError:true});
}
}
render() {
return <div>
<input name="name" onChange={this.onChange.bind(this)}/>
{this.state.hasError && <span>Error</span>}
</div>;
}
}
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
this works as you expect it to in a react application.
btw
1) You can replace
<input
{...props.input}
type={props.type}
className="form-control input-box__input"
placeholder={props.placeholder}
value={props.value}
defaultValue={props.defaultValue}
defaultChecked={props.defaultChecked}
disabled={props.disabled}
onChange={props.onChange}
onKeyDown={this.onKeyDown}
checked={props.checked}
/>
With
<input
{...props.input}
{...props}
className="form-control input-box__input"
onKeyDown={this.onKeyDown}
/>
2) You can use html power ( https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_pattern ) and do next:
<input
{...props.input}
{...props}
{...this}
/>
Where properties of this class are
className = 'form-control input-box__input';
onChange = (e) => {
e.target.checkValidity();
if (this.props.onChange) this.props.onChange()
}
But to use it, input must be inside <form></form>