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)}
/>

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.

how to visually differentiate a TextField in readOnly?

I am using the Material-UI library to make a form. But I don't know how to differentiate my TextField when they are in readOnly or in edit mode. look the same way. I would like the user to notice when he are in one way or another. Thanks in advance.
<TextField
inputProps={{
readOnly: Boolean(readOnly),
disabled: Boolean(readOnly),
}}
required
fullWidth
name="first_name"
type="text"
label="First Name"
value={first_name || ''}
onChange={this.handleChange}
/>

A bit late to the party and the option might not have been present at the time but instead of setting your input to 'disabled' you can pass the 'disableUnderline' property and set it to 'true'.
<TextField InputProps={{readOnly: true, disableUnderline: true}}/>

You can set The InputField as disabled like this:
<TextField
id="standard-name"
label="Name"
className={classes.textField}
value={values.name}
onChange={handleChange('name')}
margin="normal"
disabled
/>
And you can see the difference whenever the input is disabled or not.

As per documentation:
disabled bool: If true, the input element will be disabled.
You can set the Input field as Disabled and add a disabled class to the TextField.
<TextField
disabled = {isDisabled()}
required
fullWidth
name="first_name"
type="text"
label="First Name"
value={first_name || ''}
onChange={this.handleChange}
className={this.getDisabledClass}
/>
Define the CSS color or some style for the disabled class that you added:
Ex:
.disabled{
opacity:0.5
}

You can conditionally add a CSS class to it if readonly is true. Example
className={`${readonly ? "r-only" : ""}`}
and define the visual differences in a CSS rule for .r-only

<TextField
type='text'
defaultValue='2017-05-24'
variant='outlined'
disabled
inputProps={
{ readOnly: true, }
}
/>

how to change label color when input field is focus in react js

could you please tell me how to change label color when the input field is focused in react js I am using semantic UI
https://react.semantic-ui.com/collections/form/#types-form
here is my code
<Form>
<Form.Field>
<label>First Name</label>
<input placeholder="First Name" />
</Form.Field>
<Form.Field>
<Checkbox label="I agree to the Terms and Conditions" />
</Form.Field>
<Button type="submit">Submit</Button>
</Form>
https://codesandbox.io/s/semantic-ui-react-example-i6crv

You can actually use :focus-within selector of CSS to easily apply CSS.
div:focus-within applies CSS when any element is focussed inside your div. In your case, you can give a class to your input group — let's say input-group. And then use .input-group:focus-within label selector to style your label.
Check out the working code sandbox demo of your code.
All I did is added the following stylesheet and it worked.
.input-group:focus-within label {
color: red !important;
}

You can use react hooks (useState) to change color of the label:
Working Fork - https://codesandbox.io/s/semantic-ui-react-example-fwiz4
Just rewrite the component, include useState, and then use onFocus event inside the input field. Once it is focused, state hook will modify the focused state to true, which you can use to apply custom style or class. If you have more field, just add more state params, instead of one (focused in this example).
import React, {useState} from "react";
import { Button, Checkbox, Form } from "semantic-ui-react";
const FormExampleForm = () => {
const [focused, setFocused] = useState(false); // set false as initial value
return(
<Form>
<Form.Field>
<label style={{color: focused ? 'red' : ''}}>First Name</label>
<input placeholder="First Name" onFocus={() => setFocused(true)} />
</Form.Field>
<Form.Field>
<Checkbox label="I agree to the Terms and Conditions" />
</Form.Field>
<Button type="submit">Submit</Button>
</Form>
);
}
export default FormExampleForm;

Display emoji object to text field or textarea in React

I'm building my app with emoji-mart lib.
I have text input like this:
<FormGroup>
{emoji}
<EmojiMartPicker
set='emojione'
onSelect={(emoji) => console.log(emoji)}
onChange={this.onChange}
>
<Input
type="text"
name="emotion"
bsSize="sm"
autoComplete="off"
value={report.emotion.colons}
onChange={this.onHandleFormChange}
required
/>
</EmojiMartPicker>
</FormGroup>
Now, I wanna display Emoji Object to text input. In value attribute. I want to display emoji, not value text.
How can we do that?
See my detail problem:
https://codesandbox.io/s/646xom9y1z

Sorry, I found that just only add native props to solved my problem.
Like this:
value={report.emotion.native}
That's it..

I solve this problem take a look.
<div className="chatemoji">
<ButtonToolbar >
<div onClick={e => e.preventDefault()}>
{/* <EmojiField
name="textarea"
onChange={this.onChange.bind(this)}
fieldType="input"
/> */}
<EmojiField name="my-textarea" onChange={this.onChange.bind(this)} fieldType="input" />
</div>
</ButtonToolbar>
</div>
In onChange you have to call this code
onChange(e,value) {
this.state.data += value;
this.setState({ data: this.state.data });
}