I use material UI and a field text of type TextField. But when I was seized in my field email, the seizure does not appear to the screen and the value does not change in the email field.It always remains the same value.
Handle change is not working. the value is not passing to the handleChanges remains the same value
<TextField fullWidth={true}
className={classes.margin}
label={<FormattedMessage id="LoginTemplate.email" defaultMessage="Email" />}
id="email"
ref="email"
name="eamil"
type="email"
value={authentification.email}
onChange={this.handleChange}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Email className={classes.inputIconsColor} />
</InputAdornment>
),
}}
/>
Here is the code. Correct me What is the issue in that
Thanks in Advance.
In order to make the value change, you need to change a state (in the screen or external).
For instance (with bad performance but just to explain):
add to your cunstrunctor if exists:
constructor(props) {
super(props);
this.state = {
emailInputText: undefined //or empty string
}
}
Then change TextField component value and onChange props to:
value={this.state.emailInputText}
onChange={(text) => this.setState({emailInputText: text})}
I will consider to remove the ref='email'.
Related
I am not able to code in the right way such that formik.values will reflect into Material UI's Checkbox
Checkboxes are a little tricky to include in third party forms packages, and Material UI doesn't help with that either.
What you need to do is use the FormControlLabel component to handle the onChangge event that formik needs. Then on the Checkbox you just set the checked prop to be whatever formik has in its values.
Here is an example I use for a Checkbox to set an isAdmin value.
const formik = useFormik({
initialValues:{
isAdmin: false
},
});
<FormControlLabel
control={<Checkbox checked={formik.values.isAdmin} />}
label="is Admin"
name="isAdmin"
onChange={formik.handleChange}
/>
Using 'as'
Use the as prop with Formik Field and pass any props required to the Field itself. It will pass them onto FormControlLabel. For example, here the label field is passed down to FormControlLabel:
<Field
type="checkbox"
name="myFormikName"
as={FormControlLabel}
control={<Checkbox />}
label="This will trigger my formik name field"
/>
Multiple checkboxes using 'as'
If you have multiple checkboxes with the same name (array) you need to pass the "checked" value like so. Checks if the Formik 'name' array includes the name.
const { values } = useFormikContext()
render (
{names?.map(name => (
<Field
type="checkbox"
name="names"
value={name.fullName}
key={name.id}
as={FormControlLabel}
control={<Checkbox/>}
checked={values.names.includes(name.fullName)}
label={name.fullName}
/>
))}
)
Using 'setFieldValue'
const { values, setFieldValue } = useFormikContext()
<FormControlLabel
control={<Checkbox />}
label="My mui label"
checked={values.myMuiCheck}
onChange={() =>
setFieldValue(
'myMuiCheck',
!values.myMuiCheck,
)
}
/>
I want to change default value of TextField when state change but it doesn't work. I guess it is doesn't re-render.
<TextField
multiline={true}
rows={15}
disabled
id="outlined-basic" label="" variant="outlined"
defaultValue={!isEn?data.data[0].description:data.data[0].descriptionLocalization.en}
/>
<Button style={{position:"absolute",right:"20px",bottom:"5px"}} onClick={changeStateIsEn}>Save</Button>}
Default value is not meant to be changed with state.
You should set the value for reflecting the default value
<TextField
multiline
rows={15}
disabled
id="outlined-basic"
label=""
variant="outlined"
defaultValue="Something that will stay there initially only"
value={!isEn ? data.data[0].description : data.data[0].descriptionLocalization.en}
/>
There are two parts missing to your TextField component that is required to tie the input to state.
As user Mohammad Fasial said, the defaultValue prop is only for the default value the component will have. The correct prop you're looking for is value. State will need to equal value.
To listen for changes when the user inputs new information into the TextField input, you'll need to use the onChange prop. The onChange prop (on change listener) let's you provide a function as an argument to run when the input value changes. In this case we want to set onChange to run setExampleState to set the state to the value of the input field by using the event.target.value property.
function ExampleComponent(){
const [exampleState, setExampleState] = useState([]);
...
return (
<>
<TextField
multiline={true}
rows={15}
disabled
id="outlined-basic" label="" variant="outlined"
defaultValue={!isEn?data.data[0].description:data.data[0].descriptionLocalization.en}
value={exampleState}
onChange={(event) => setExampleState(event.target.value)}
/>
<Button style={{position:"absolute",right:"20px",bottom:"5px"}} onClick={changeStateIsEn}>Save</Button>
</>
);
}
To learn more about the different properties TextField has, you can look at the TextField API Documentation. There are also a lot of TextField code examples that can be expanded on the Material-UI site as well.
Update the key of Element or Container after Default value Change
So, the main problem is, that antd form does not detect my custom input based on antd standard input:
There is a piece of form code (AddProduct):
<Form.Item
className="m-t-10"
name="price"
rules={[
{
required: true,
message: `${t('FORM.ERR.SHOP.PRICE')}`,
},
]}
>
<CurrencyInput size="small" placeholder={t('FORM.SHOP.PRICE_VAT')} name="price" />
</Form.Item>
There is my custom input (CurrencyInput):
return (
<Input size={props.size} placeholder={props.placeholder} name={props.name} type="number" prefix={settings[6].value} />
)
The problem is when I try to submit the form it does not detect currency input, throws err that this field is required. Any ideas are it possible to implement custom input, basically, it's more HOC than custom input
You need to pass to your custom component all props, because Form.Item pass to there onChange and value props
function CustomInput({size, placehodler, name, ...restProps}) {
return (
<Input size={size} placeholder={placeholder} name={name}
type="number" prefix={settings[6].value} {...restProps} />
)
}
I have a textfield variant outlined, and there I have a dynamic label, the problem is that when it changes the top line in width remains the same as the first time
<TextField
id="debtorIin"
name="debtorIin"
label={debtorType === "pvt" ? "Ф.И.О.:" : "Наименование организации:"}
disabled={debtorFullInfo && true}
className={classes.textField}
value={debtorIin}
helperText={touched.debtorIin ? errors.debtorIin : ""}
error={touched.debtorIin && Boolean(errors.debtorIin)}
onChange={change.bind(null, "debtorIin")}
margin="normal"
variant="outlined"
/>
(source: imggmi.com)
(source: imggmi.com)
I think it happens because it won't recalculate the width on property change, you can solve that by creating two different TextField for it.
First, you need one that contains all the common props.
const MyTexField = ({ label, ...props }) => (
<TextField
id="debtorIin"
name="debtorIin"
label={props.label}
disabled={props.debtorFullInfo && true}
className={props.classes.textField}
value={props.debtorIin}
helperText={props.touched.debtorIin ? props.errors.debtorIin : ""}
error={props.touched.debtorIin && Boolean(props.errors.debtorIin)}
onChange={change.bind(null, "debtorIin")}
margin="normal"
variant="outlined"
/>
);
Then, you can use that component:
<MyTextField label="Ф.И.О.:" {...props} />
I want to autofocus first redux field. I have tried many different options available but none of them worked. So whenever the form gets created, it should focus to first field.
<Field
name={'Email'}
label="Email *"
onFocusCb={this.hideDoneButton}
component={FormInput}
containerStyle={styles.inputStyle}
clearButtonMode={'always'}
autoCorrect={false}
/>
I have created the component{FormInput} outside the class. Below is the code for the same.
const FormInput = props =>
(<View style={props.containerStyle}>
<FormTextInput
autoFocus={true}
multiline
style={props.style}
autoCapitalize={props.autoCapitalize}
clearButtonMode={props.clearButtonMode}
selectionColor={props.selectionColor}
value={props.input.value}
onFocus={props.onFocusCb}
keyboardType={props.keyboardType}
label={props.label}
placeholder={props.placeholder}
defaultValue={props.defaultValue}
onChangeText={text => props.input.onChange(text)}
onEndEditing={() => {
if (props.onEndEditing) {
props.onEndEditing();
}
if (props.input.onEndEditing) {
props.input.onEndEditing();
}
}}
/>
</View>);
You could use the HTML5 attribute autoFocus. This solution is not related to Redux form.
<Field
autoFocus
name={'Email'}
label="Email *"
onFocusCb={this.hideDoneButton}
component={FormInput}
containerStyle={styles.inputStyle}
clearButtonMode={'always'}
autoCorrect={false}
/>
There are ways to do it within Redux-form, like setting the props ref, withRef, use getRenderedComponent() and then calling .focus(), but for this simple behavior it's not clear what the benefit, over just using autoFocus, would be.