Develop Reference

onChange doesn't work when value of input clears

I have a problem in handling input's value changing
so here is my code in react,onChange works but when i clear the default value it doesn't log anything until i do another change.
<Form.Control
type="text"
placeholder="name"
defaultValue={this.state.name}
onChange={e=>console.log(e.target.value)}
/>
I wrote console.log just for test.

Value is not changing because in reactjs component rerenders once state chages and using console.log on onChange does not update any change in state. so you have to update the state on onChange event,
Try following, I am assuming it is class component as you have used this.state.name
<Form.Control
type="text"
name="name"
placeholder="name"
defaultValue={this.state.name || ""}
value={this.state.name}
onChange={e=>this.setState({name:e.target.value})}
/>

Use value instead of default value:
<Form.Control
type="text"
placeholder="name"
value={this.state.name || ""}
onChange={e=>console.log(e.target.value)}
/>

Try using an empty value instead of giving it null
<Form.Control
type="text"
placeholder="name"
value={this.state.name || ""}
onChange={e=>console.log(e.target.value)}
/>

Updated
Try with uncontrolled input:
<Form.Control
type="text"
placeholder="name"
onChange={(e) => console.log(e.target.value)}
/>

React Semantic UI Form, does not offer save password to the user after submitting the form

I am using React Semantic UI, and I have simple Register Form. I want browser ask user Do you want to save password for this website? after User submits the form, because now when I send the form it just does my sendLoginRequest and after processing the requests that's it. I was trying to mark autoComplete etc. Nothing helped. How can I solve it? Thanks.
sendLoginRequest = () => {
...
}
render() {
return (
<Fragment>
<Form onSubmit={this.sendLoginRequest}>
<Form.Input
required
label="Name"
type="text"
placeholder="Name"
name="name"
onChange={this.handleChange}
{...this.state.errors.name}
/>
<Form.Input
required
label="Email"
type="email"
placeholder="Email"
name="email"
onChange={this.handleChange}
{...this.state.errors.email}
/>
<Form.Input
required
label="Password"
type="password"
placeholder="Password"
autoComplete="new-password"
name="password"
onChange={this.handleChange}
{...this.state.errors.password}
/>
<Form.Input
autoComplete="new-password"
required
label="Repeat Password"
type="password"
placeholder="Again Password"
name="repeatPassword"
onChange={this.handleChange}
{...this.state.errors.repeatPassword}
/>
<Button type='submit'>Submit</Button>
</Form>
<Spinner visible={this.state.spinner} />
</Fragment>
)
}

In formik, shorthand input field is not working

In Formik, I try to use {...formik.getFieldProps('email')} on my input field
instead of using value, onChange, and onBlur. But it's not working.
This works :
<input id="email" name="email" type="text" value={formik.values.email} onChange={formik.handleChange} onBlur={formik.handleBlur} />
But this doesn't :
<input id="email" type="text" {...formik.getFieldProps("email")} />
Code is here : https://codesandbox.io/s/formik-pb-with-getfieldprops-83tze?fontsize=14
Any ideas ?
Thanks !

As MiDas said, what you are doing should work if you are on latest version.
I'll mention an even more concise alternative: the Field component.
Field component handles the field property propagation for you.
Simple example:
<Field name="email" type="text" />
Notice that you don't need to do {...formik.getFieldProps("email")}, or any other "boilerplate".
Related to Field is useField, which can be used to make custom form components just as easy to use - no "boilerplate" needed.
A custom component:
function TextInputWithLabel({ label, ...props }) {
// useField() returns [formik.getFieldProps(), formik.getFieldMeta()]
// which we can spread on <input> and also replace ErrorMessage entirely.
const [field, meta] = useField(props);
return (
<>
<label
htmlFor={props.id || props.name}
css={{ backgroundColor: props.backgroundColor }}
>
{label}
</label>
<input className="text-input" {...field} type="text" {...props} />
{meta.touched && meta.error ? (
<div className="error">{meta.error}</div>
) : null}
</>
);
}
Usage:
<TextInputWithLabel name="input1" label="Random comment" />
As seen in code from codesandbox.

redux-form input type number returns string

redux-form input type is returning string , it should have returned number
Replicated problem
so i used parse to convert it to number
<Field
name="age"
parse={value => Number(value)}
component="input"
type="number"
placeholder="Age"
/>
Note : In redux form it Shows string
But the problem is it does let us remove last DIGIT ZERO

It happens because Number('') return 0. So Instead of setting the parse attribute to Field, you could just parse the value wherever you need
<form onSubmit={handleSubmit}>
<div>
{age ? <div>{typeof Number(age)} {`${age}`}</div>: null}
</div>
<div>
<label>Age</label>
<div>
<Field
name="age"
component="input"
type="number"
placeholder="Age"
/>
</div>
</div>
</form>
CodeSandbox

ReactJS - Waiting for user to finish multiple inputs

I just started learning ReactJS so any help would be appreciated. I'm trying to make a form where user inputs his/her address into multiple input fields. When the user finishes typing into ALL input fields, then a function will be triggered to validate the address. Through research, I found out about onChange and onBlur but it seems like that only works for one input field. Is there any other way to keep track of all five inputs and trigger a function after the user finishes? Or if there is any way to use onChange to do so, I would love to know. The following is the code for my form. Thank you in advance.
<form>
<label>
<DebounceInput
name="addressLine1"
placeholder="Address Line 1"
debounceTimeout={300}
onChange={ (e) => this.handleChange(e, name)}
/>
</label>
<label>
<DebounceInput
name="addressLine2"
placeholder="Address Line 2"
debounceTimeout={300}
onChange={ (e) => this.handleChange(e, name)}
value={this.state.address.addressLine2}
/>
</label>
<label>
<DebounceInput
name="city"
placeholder="City"
debounceTimeout={300}
onChange={ (e) => this.handleChange(e, name)}
value={this.state.address.city}
/>
</label>
<label>
<br />
<DebounceInput
name="state"
placeholder="State"
debounceTimeout={300}
onChange={ (e) => this.handleChange(e, name)}
value={this.state.address.state}
/>
</label>
<label>
<DebounceInput
name="postalCode"
placeholder="Postal Code"
debounceTimeout={300}
onChange={ (e) => this.handleChange(e, name)}
value={this.state.address.postalCode}
/>
</label>
</form>

Maybe you can incorporate a condition inside of your handleChange function, where you check if your currentstate is sufficient to do a validation, if so you can trigger the validation.