I have two radio buttons. Based on which radio button is selected, I need to open input fields to collect some data. How can I achieve this using react?
I tried manipulating the onClick and onChange functions.
Here is the code
import { useState, useEffect } from 'react';
const App = () => {
const [itWorks, setItWorks] = useState(false)
function handleClick(){ SetItWorks(!itworks) }
return (
<div>
{itWorks ?
<>
'It works!'
<input type="text" />
</>: 'It does not'}
<button onClick={() => setItWorks(!itWorks)} >Press me
<input type='radio' aria-selected onClick={handleClick} />
</div>
) }
export default App;
Related
The function I pass to the onsubmit event is not executed when the form is submitted
import React from 'react';
import styles from './Form.module.css';
import Button from './Button';
const Form = function (props) {
const addUserHandler = function (e) {
e.preventDefault();
console.log(135);
};
return (
<form onSubmit={addUserHandler}>
<input
type='text'
className={styles.input}
placeholder='Your Age'
ref={nameInputRef}
/>
<Button type='submit'>add user</Button>
</form>
);
};
export default Form;
I expected that the function adduserhandler will be executed when I submitted the form.
You are not passing the type correctly from <Button> to <button>, which means that the submit button is rendered as a normal button which does not submit the form. Instead of:
<button type={props.type ? 'button' : props.type}>
do:
<button type={props.type ? props.type : 'button'}>
or shorter:
<button type={props.type || 'button'}>
I am using React, and I would like to find a way to trigger this message (that now triggers only when pressing the type="submit" button, on will, is there any action I can use to trigger this message at any point (for example if a user presses any other button)
<input
id="conditions"
type="checkbox"
name="conditions"
ref={acceptConditions}
required
></input>
This can be achieved with reportValidity() MDN documentation
setTimeout(() =>
document.getElementById('example').reportValidity(),
3000
)
<input id="example" type="checkbox" required />
Ok here are a few approaches, that works.
approach 1
Using the reportValidity()
This function will check the validity of the element and then trigger the event.
import { useRef } from "react";
import "./styles.css";
export default function App() {
const acceptConditions = useRef();
const formRef = useRef();
const handleSubmit = () => {
acceptConditions.current.reportValidity();
};
return (
<form ref={formRef}>
<input
id="conditions"
type="checkbox"
name="conditions"
ref={acceptConditions}
required
></input>
<span>Tick this box to continue</span>
<br />
<button type={"submit"}>submit the form</button>
<br />
<button onClick={handleSubmit}>Imposter button</button>
</form>
);
}
This is a good apporach And one that i recommend.
approach 2:
First of all if you want any other button to trigger the same event then you can do is make a reference to the form and then submit the form manually on the button press.
Here is an example.
import { useRef } from "react";
import "./styles.css";
export default function App() {
const acceptConditions = useRef();
const formRef = useRef();
const handleSubmit = () => {
console.log(formRef.current.submit);
};
return (
<form ref={formRef}>
<input
id="conditions"
type="checkbox"
name="conditions"
ref={acceptConditions}
required
></input>
<span>Tick this box to continue</span>
<br />
<button type={"submit"}>submit the form</button>
<br />
<button onClick={handleSubmit}>Imposter button</button>
</form>
);
}
in the above code the imposter button will trigger the same action as the button with the type="submit".
thank you.
I have a condition like this.
I want to enable text input if the button is pressed and can edit the text in it.
the question is how to make the function in react js?
my Code:
function App() {
return (
<div className="App">
<label>URL : </label>
<input
placeholder='http://localhost:3000/123456'
disabled
/>
<button type='submit'>Active</button>
</div>
);
}
export default App;
Use useState hook and onClick event like in this example.
import React, { useState } from "react";
function App() {
const [active, setActive] = useState(false)
return (
<div className="App">
<label>URL : </label>
<input
placeholder='http://localhost:3000/123456'
disabled={!active}
/>
<button
type='submit'
onClick={() => setActive(!active)}
>
Active
</button>
</div>
);
}
I have a custom event handler (when clicked on a button) that injects data in the nested arrays based on a drop down selection. After the event handler added the data the form doesn't update properly. Calling any other event handler on any other input of the form will trigger the form update. The data is set correctly but the form doesnt update properly after the initial onClick event (see code)
I have enableReinitialize set
https://codesandbox.io/s/updateissue-fy72h
import { useEffect, useState } from "react";
import { Formik, Form, Field, FieldArray, TextField } from "formik";
export default function Design() {
const q = {
questions: ["a", "b", "c", "d"],
selectedLanguage: "nl",
};
const [questionnaire, setQuestionnaire] = useState(q);
function addLanguageValue() {
questionnaire.questions.push(questionnaire.selectedLanguage);
setQuestionnaire(questionnaire);
}
return (
<div>
<Formik
initialValues={questionnaire}
enableReinitialize
onSubmit={() => {}}
>
{({ values, handleChange }) => (
<Form>
<div>
<Field as="select" name="selectedLanguage">
<option value="fr">French</option>
<option value="nl">Dutch</option>
<option value="en">English</option>
</Field>
<button
type="button"
className="bg-gradient-to-b"
onClick={(e) => {
addLanguageValue(values);
}}
>
Add language
</button>
</div>
<div>
<FieldArray
name="questions"
render={(rootHelper) => (
<div>
{values.questions.map((value, j) => {
return <div>{value}</div>;
})}
</div>
)}
/>
</div>
</Form>
)}
</Formik>
You're mutating the state object, which causes the problem. If you create a fresh object in addLanguageValue, it works as expected:
function addLanguageValue() {
setQuestionnaire({
...questionnaire,
questions: [...questionnaire.questions, questionnaire.selectedLanguage]
});
}
Sandbox example
Because the onClick function doesn't cause a re-render of the state, you can use the following work around / trick by using an inoffensive function as setStatus to trigger re-render:
<button
type='button'
className='bg-gradient-to-b'
onClick={e => {
addLanguageValue(values);
//Used for rerendering.
props.setStatus('Adding language!');
}}
>
Add language
</button>;
I have my standard webpage and an overlay with a message and a checkbox. I want that you can not interact with the webpage until the checkbox in the overlay is clicked. Is there a way to do that in react?
you can use useState Hook and set disable property in every field. After clicking on button you can set false to that property. Here is the example:
import React, {useState} from 'react';
const DisabledForm = () => {
const [disable, setDisable] = useState(true);
function handleClick(event) {
setDisable(!disable);
}
return (
<div>
<div>
First Name: <input disabled={disable}/> <br/>
Last Name: <input disabled={disable}/> <br/>
Email: <input disabled={disable}/> <br/>
Phone: <input disabled={disable}/> <br/>
<button onClick={handleClick}>{ disable? "< Enable >" : "< Disable >" }</button>
</div>
</div>
);
};
export default DisabledForm;