I want create a function using with i can reset value in form inputs without submit. I tried create that function in App Component (resetFormFields) and pass it on props to Form Component. It's preety simply when I want to do this onSubmit (e.target.reset()) but I got stuck when I have to do it without submit, on a different element than the form. Can I do that without adding these values to state?
App:
class App extends Component {
state = {
people: [],
formMessages: [],
person: null
};
handleFormSubmit = e => {
e.preventDefault();
const form = e.target;
const name = form.elements["name"].value;
const username = form.elements["username"].value;
this.addPerson(name, email);
form.reset();
};
resetFormFields = () => {
return;
}
render() {
return (
<div className="App">
<Form formSubmit={this.handleFormSubmit}
reset={this.resetFormFields} />
</div>
);
}
Form:
const Form = props => (
<form className={classes.Form}
id="form"
onSubmit={props.formSubmit}>
<input autoFocus
id="name"
type="text"
defaultValue=""
placeholder="Name..."
/>
<input
id="email"
type="text"
defaultValue=""
placeholder="Email..."
/>
<Button
btnType="Submit"
form="form"
type='submit'>
Submit
</Button>
<label onClick={props.reset}>Reset fields</label>
</form> );
onHandleFormSubmit = (e) =>{
e.preventDefault();
e.target.reset();
}
You need to make your inputs controlled by passing the value you store in your state then you just have to reset the state values and your component value resets.
check this sample below
handleInputChange = (e) => {
let { name, value } = e.target;
this.setState({
...this.state,
inputs: {
[name]: value
}
});
}
your component will now look like
<input name='fullName' value={this.state.inputs.fullName} onChange={this.handleInputChange} />
Your reset function will just clear the state and your input field will be empty since it's controlled via state
resetInputFields = () => {
this.setState({ inputs: {} })
}
you should give set your input values based on component state, then just update the component state
class App extends Component {
state = {
people: [],
formMessages: [],
person: null,
name: "",
email: "",
};
updateState = (newState) => {
this.setState(newState);
}
handleFormSubmit = e => {
e.preventDefault();
this.addPerson(this.state.name, this.state.email);
form.reset();
};
resetFormFields = () => {
this.setState({name:"", email: ""});
}
render() {
return (
<div className="App">
<Form formSubmit={this.handleFormSubmit} updateState={this.updateState}
reset={this.resetFormFields} email={this.state.email} name={this.state.name} />
</div>
);
}
and then
const Form = props => (
<form className={classes.Form}
id="form"
onSubmit={props.formSubmit}>
<input autoFocus
id="name"
type="text"
defaultValue=""
value={this.props.name}
onChange={(e) => this.props.updateState({name: e.target.value})}
placeholder="Name..."
/>
<input
id="email"
type="text"
defaultValue=""
value={this.props.email}
onChange={(e) => this.props.updateState({email: e.target.value})}
placeholder="Email..."
/>
<Button
btnType="Submit"
form="form"
type='submit'>
Submit
</Button>
<label onClick={props.reset}>Reset fields</label>
</form> );
Related
Is it possible to substitute the value from useState with the one coming from input?
Or is there a way to do this using dispatch?
I have tried many ways, but none of them work.
const renderInput = ({
input,
label,
type,
meta: { asyncValidating, touched, error },
}) => {
const [value, setValue] = useState('default state');
const onChange = event => {
setValue(event.target.value);
// + some logic here
};
return (
<div>
<label>{label}</label>
<div className={asyncValidating ? 'async-validating' : ''}>
<input {...input} value={value} onChange={onChange} type={type} placeholder={label} />
{touched && error && <span>{error}</span>}
</div>
</div>
);
};
const SelectingFormValuesForm = props => {
const { type, handleSubmit, pristine, reset, submitting } = props;
return (
<form onSubmit={handleSubmit}>
<div>
<label>Name</label>
<div>
<Field
name="name"
component={renderInput}
type="text"
placeholder="Dish name..."
/>
</div>
</div>
</form>
);
};
SelectingFormValuesForm = reduxForm({
form: 'selectingFormValues',
validate,
asyncValidate,
// asyncBlurFields: ['name'],
})(SelectingFormValuesForm);
export default SelectingFormValuesForm;
This way, unfortunately, the value sent to the submit remains empty.
I am new in React and I am confused, What I want is i have a drop down list with options as 1,2,3,4.... upto n. Suppose if I select on dropdown number 5 then dynamically 5 input fields should get generated. Also for each input field which is created. I should be manually able to remove them with a remove button.
I have created adding of input options but it is manual like we click on add button new option is added and when we click remove that particular option with index gets deleted. You can refer this link for code
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
users: [{firstName: "", lastName: ""}]
};
this.handleSubmit = this.handleSubmit.bind(this);
}
addClick(){
this.setState(prevState => ({
users: [...prevState.users, { firstName: "", lastName: "" }]
}))
}
createUI(){
return this.state.users.map((el, i) => (
<div key={i}>
<input placeholder="First Name" name="firstName" value={el.firstName ||''} onChange={this.handleChange.bind(this, i)} />
<input placeholder="Last Name" name="lastName" value={el.lastName ||''} onChange={this.handleChange.bind(this, i)} />
<input type='button' value='remove' onClick={this.removeClick.bind(this, i)}/>
</div>
))
}
handleChange(i, e) {
const { name, value } = e.target;
let users = [...this.state.users];
users[i] = {...users[i], [name]: value};
this.setState({ users });
}
removeClick(i){
let users = [...this.state.users];
users.splice(i, 1);
this.setState({ users });
}
handleSubmit(event) {
alert('A name was submitted: ' + JSON.stringify(this.state.users));
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
{this.createUI()}
<input type='button' value='add more' onClick={this.addClick.bind(this)}/>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(<App />, document.getElementById('container'));
https://jsfiddle.net/mayankshukla5031/qL83cf2v/1/
But now I want generate it with dropdown, selecting the size of input options let say 5 so dynamically 5 options fields are created.
Can anybody guide me on it please.
Somthing like this should help :
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
users: [1],
options: 1,
};
this.handleSubmit = this.handleSubmit.bind(this);
}
addClick(){
const newUsers = Array.from(Array(Number(this.state.options)), (_, i) => i);
this.setState((prevState) => ({
users: [...prevState.users, ...newUsers],
}));
};
createUI() {
return this.state.users.map((el, i) => (
<div key={i}>
<input
placeholder="First Name"
name="firstName"
value={el.firstName || ""}
onChange={this.handleChange.bind(this, i)}
/>
<input
placeholder="Last Name"
name="lastName"
value={el.lastName || ""}
onChange={this.handleChange.bind(this, i)}
/>
<input
type="button"
value="remove"
onClick={this.removeClick.bind(this, i)}
/>
</div>
));
}
handleChange(i, e) {
const { name, value } = e.target;
let users = [...this.state.users];
users[i] = { ...users[i], [name]: value };
this.setState({ users });
}
removeClick(i) {
let users = [...this.state.users];
users.splice(i, 1);
this.setState({ users });
}
handleSubmit(event) {
alert("A name was submitted: " + JSON.stringify(this.state.users));
event.preventDefault();
}
handleInput = (event) => {
event.preventDefault();
this.setState({ options: event.target.value });
};
render() {
return (
<form onSubmit={this.handleSubmit}>
{this.createUI()}
<select defaultValue={this.state.options} onChange={this.handleInput}>
{Array.from(Array(100), (_, i) => i + 1).map((opt) => (
<option>{opt}</option>
))}
</select>
<input
type="button"
value="add more"
onClick={this.addClick.bind(this)}
/>
<input type="submit" value="Submit" />
</form>
);
}
}
ReactDOM.render(
<App />,
document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>
I hope this one helps. Link Output keys with ur input fields.
function App({data}){
const [selectedField, setSelectedField] = useState('');
const [output, setOutput] = useState({}); // u can add a default values of the keys in inital state
useEffect(()=>{
if(selectedField !== ''){
const selectedData = data.filter(el=> name === el.name);
if(selectedData){
setOutput(selectedData);
}
}
},[selectedField, data]);
const onDataFieldRemove = (key) => {
setOutput(prevState => {
delete prevState[key]; // if u dont want unwanted data in ur database or use
// prevState[key] = null; if u want to maintain ur default keys;
return prevState;
});
}
return (<div>... add ur input fields and remove button</div>)
}
So I am trying to make a textfield component in React that is highly reusable but whenever I try to access event.target.name or event.target.value I get empty data.
Is there any way to get this code to work?
function LoginForm() {
const [form, setValues] = useState({
username: "",
password: ""
});
const printValues = e => {
e.preventDefault();
console.log(form.username, form.password);
};
const updateField = e => {
setValues({
...form,
[e.target.name]: e.target.value
});
};
const TextField = props => {
return(
<label>
React Component:
<input
value={props.value}
name='react'
onChange={e => props.change(e)}
/>
</label>
)
}
return (
<form onSubmit={printValues}>
<TextField
value={form.username}
name='username'
change={updateField}
/>
<br />
<TextField
value={form.password}
name='password'
change={updateField}
/>
<br />
<button>Submit</button>
</form>
);
}
This code is an example that I have gotten to work. Why does this code work but not the code above?
function LoginForm() {
const [form, setValues] = useState({
username: "",
password: ""
});
const printValues = e => {
e.preventDefault();
console.log(form.username, form.password);
};
const updateField = e => {
setValues({
...form,
[e.target.name]: e.target.value
});
};
return (
<form onSubmit={printValues}>
<label>
Username:
<input
value={form.username}
name="username"
onChange={updateField}
/>
</label>
<br />
<label>
Password:
<input
value={form.password}
name="password"
type="password"
onChange={updateField}
/>
</label>
<br />
<button>Submit</button>
</form>
);
}
your child component has it's name prop hardcoded name='react' and that's because your [e.target.name]: e.targe.value statement is not working, use name={props.name} instead and it would solve the problem.
const TextField = props => {
return(
<label>
React Component:
<input
value={props.value}
name={props.name}
onChange={e => props.change(e)}
/>
</label>
)
}
The first code you show has a prop change instead of the onChange event listener in the TextField component.
I was looking here https://material-ui.com/es/components/text-fields/ because I never used material-ui, and in the example they still use the regular onChange.
So try changing change for onChange, as it is the only difference between both code examples besides the use of the component.
I am trying to use two states in my Add Customer JS one is used to hide the form and the second is used for JSON.
I want to use form-State to hide a form on cancel button click and the initial-State for JSON.
I want to do something like this
Is it possible to have two states in one react component
import React from 'react';
import { Button, Form, Modal } from 'semantic-ui-react';
export default class AddCustomer extends React.Component {
constructor(props) {
super(props);
this.state = {
showCreateForm:false,
formData:{
name: '',
address: ''
}
}
this.handleChangeName = this.handleChangeName.bind(this);
this.handleChangeAddress = this.handleChangeAddress.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChangeName(event) {
const value = event.target.value;
console.log(value);
this.setState({formData:{name:value}});
//name: ""
//address: ""
console.log(this.state.formData);
}
handleChangeAddress(event) {
const value = event.target.value;
console.log(value);
this.setState({formData:{address:value}});
//name: "ram" but now there is no address in formData
console.log(this.state.formData);
}
handleSubmit(event) {
event.preventDefault();
////address: "aaaaa" now there no name in formData
console.log(this.state.formData);
this.setState({formData:{
name:this.state.name, address:this.state.address
}});
this.props.onAddFormSubmit(this.state.formData);
}
//On cancel button click close Create user form
closeCreateForm = () => {
this.setState({ showCreateForm: false })
}
//Open Create new Customer form
openCreateCustomer = () => {
this.setState({ showCreateForm: true })
}
render() {
return (
<div>
<Modal closeOnTriggerMouseLeave={false} trigger={
<Button color='blue' onClick={this.openCreateCustomer}>
New Customer
</Button>
} open={this.state.showCreateForm}>
<Modal.Header>
Create customer
</Modal.Header>
<Modal.Content>
<Form onSubmit={this.handleSubmit}>
<Form.Field>
<label>Name</label>
<input type="text" placeholder ='Name' name = "name"
value = {this.state.name}
onChange = {this.handleChangeName}/>
</Form.Field>
<Form.Field>
<label>Address</label>
<input type="text" placeholder ='Address' name = "address"
value = {this.state.address}
onChange = {this.handleChangeAddress}/>
</Form.Field>
<br/>
<Button type='submit' floated='right' color='green'>Create</Button>
<Button floated='right' onClick={this.closeCreateForm} color='black'>Cancel</Button>
<br/>
</Form>
</Modal.Content>
</Modal>
</div>
)
}
}
You can directly give initial state on the constructor. e.g
this.state ={showCreateForm: false, formModel:{name:'abc', address:'xyz'}}
Yes, you can have multiple state variables technically.
As it was already mentioned, yes, you could do it in the constructor. However you could go even further and declare it as a class member. Like following:
export default class Customer extends React.Component {
state = {
showCreateForm: false,
form: {
name: "",
address: "",
}
}
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
this.props.onAddFormSubmit(this.state.form);
this.setState({
...this.state,
form: {
name: "",
address: "",
}
});
}
// ...
render() {
return (
<div>
<Modal
closeOnTriggerMouseLeave={false}
trigger={
<Button color="blue" onClick={this.openCreateCustomer}>
New Customer
</Button>
}
open={this.state.showCreateForm}
>
<Modal.Header>Create customer</Modal.Header>
<Modal.Content>
<Form onSubmit={this.handleSubmit}>
<Form.Field>
<label>Name</label>
<input
type="text"
placeholder="Name"
name="name"
value={this.state.form.name}
onChange={this.handleChange}
/>
</Form.Field>
<Form.Field>
<label>Address</label>
<input
type="text"
placeholder="Address"
name="address"
value={this.state.form.address}
onChange={this.handleChange}
/>
</Form.Field>
<br />
<Button type="submit" floated="right" color="green">
Create
</Button>
<Button
floated="right"
onClick={this.closeCreateForm}
color="black"
>
Cancel
</Button>
<br />
</Form>
</Modal.Content>
</Modal>
</div>
);
}
}
So, I have a form and I want the user to display the values user fills in the fields as a JSON object at the end when the user clicks the submit button.
In Form.js,
state={
group:[
type-A{col1: "",
col2:""
}
]
}
handleSubmit(event) {
event.preventDefault();
<Credentials value={JSON.stringify(this.state)}/>
}
change = e =>{
this.setState({[e.target.name]: e.target.value})
};
render(){
return(
<div class="classform">
<form >
<label>
Column1:
<br/>
<input type="text"
name="group1"
placeholder="Column1"
value={this.state.column1}
onChange={e=> this.change(e)}
//other fields
//input form fields
<button onClick={this.handleSubmit}>Submit</button>
In Credentials.js,
return (
<p>{value}</p>
)
}
export default Credentials
The above code gives me an error, in handleSubmit() in second line (<Credentials value={JSON.stringify(this.state)}/>)
When the user clicks Submit button, I want to get a JSON object for the data entered in the input fields in the form and update it if the user updates any information in the fields.
Move the component to render method. and use conditional rendering.
state = {credentials: false}
handleSubmit = event => {
event.preventDefault();
this.setState({
credentials: true // display Credentials component
});
};
render() {
return (
<div>
<button onClick={this.handleSubmit}>Submit</button>
{this.state.credentials && (
<Credentials value={JSON.stringify(this.state)} />
)}
</div>
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const Credentials = ({ value }) => {
return <p>{value}</p>;
};
class App extends React.Component {
state = { credentials: false };
handleSubmit = event => {
event.preventDefault();
this.setState({
credentials: true // display Credentials component
});
};
change = e => {
const name = e.target.name;
const nameObj = {};
nameObj[name] = e.target.value;
this.setState({ ...nameObj });
};
render() {
return (
<div>
<input
type="text"
name="col1"
value={this.state['col1']}
onChange={e => this.change(e)}
/>
<button onClick={this.handleSubmit}>Submit</button>
{this.state.credentials && (
<Credentials value={JSON.stringify(this.state)} />
)}
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
</script>