I would like to know how to update inputProps in textfield based off another prop,
<TextField
name={props.name}
value={props.vals}
inputProps={{autocapitalize:"characters", textTransform:"uppercase"}}
onChange={props.getStuff}
/>
I also have a prop that is designed to check if the textfield should display everything in all caps or not !
setAllCapital = true
I would like it so if setAllCapital is true the input props is given the autocap and text transform, but if its false then it is not given anything.
What is the convention/best way to do this ?
Thank you
You can pass the input props based on condition
<TextField
name={props.name}
value={props.vals}
inputProps={props.setAllCapital ? {autocapitalize:"characters", textTransform:"uppercase"} : "whatever value you want"}
onChange={props.getStuff}
/>
Now whenever your setAllCapital is false, you won't be sending autocap and textTransform to TextField.
Edit:
And a much more concise way would be
<TextField
name={props.name}
value={props.vals}
inputProps={props.setAllCapital && {autocapitalize:"characters", textTransform:"uppercase"}}
onChange={props.getStuff}
/>
Now your input props will be undefined if setAllCapital is false
One of the ways is to check the condition inline and pass the props. If props.setAllCapital is false then nothing gets passed to inputProps.
<TextField
name={props.name}
value={props.vals}
inputProps={props.setAllCapital ? {autocapitalize:"characters",
textTransform:"uppercase"}:undefined}
onChange={props.getStuff}
/>
Related
I have the following code:
<TextField
fullWidth
InputLabelProps={{style:InputLabelStyle, shrink: this.props.value ===null? false:true}}//problem here
label={<><IoIcons.IoMdBusiness/> Name</>}
id="outlined-size-small"
value={selectedValue?.first_name}
color="primary"
InputProps={{readOnly: true}}
/>
I'm trying to "fix" a bug that makes the label overlap the text if this is placed programmatically. So It seems I have to activate the label property "shrink". So I'm trying to make it just activate it when the textfield has something inside, otherwise, shrink should be false. However, I don't know how to reference value inside the inputLabelProps property. this.props.value is not working.
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
I have a checkbox in a Formik whose initial value is determined after a DB fetch, which populates values. But if I do the following, then although the initial value is correct, I can't toggle the checkbox, it always remains checked.
<Form.Control type="checkbox"
id="checkCertAgreement"
name="certAgreement"
checked={values.certifyAndReview === 'Y'}
value="Y"
onChange={handleChange}
onBlur={handleBlur}
/>
That means I can't use checked but have to use defaultChecked. But the problem is, my values come after an Ajax fetch in an initial useEffect fetch. defaultChecked only applies on the very first render. When the first render happens, obviously values aren't loaded yet and values.certifyAndReview === 'Y' is false. So now my initial value for the checkboxes doesn't work anymore, although I can toggle now.
<Form.Control type="checkbox"
id="checkCertAgreement"
name="certAgreement"
defaultChecked={values.certifyAndReview === 'Y'}
value="Y"
onChange={handleChange}
onBlur={handleBlur}
/>
Any solutions to this?
Note: This problem does not occur on radiobuttons, for some reason. On radiobuttons, when I specify checked={values.field === 'Y'}, it both sets the initial post-fetch value and allows me to toggle.
I had to add an explicit checked as follows,
checked={values.field == 'Y' ? true : false}
Now it picks up initialized checked states.
My suggestion is to use Form.Check instead.
<Form.Check type="checkbox"
id="checkCertAgreement"
name="certAgreement"
checked={values.certifyAndReview === 'Y'}
onChange={handleChange}
onBlur={handleBlur}
/>
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'.
In default semantic-ui we can do this option: https://github.com/Semantic-Org/Semantic-UI/commit/b4ae26d24f75886c3d5f6fc4f00e176f09705a13
But, how to do it in semantic-ui-react? Google nothing say about it, please, I need help.
What I'm trying to achieve:
I'm using redux-form. In my form present semantic component <Form.Select multiple ....> and after success submit - call to redux-form method reset. All is fine, form is clear... but not dropdown/select field. Any ideas?
I solved the problem as follows:
Semantic-ui-react props value set to the current value of the field.
<Form.Select
name={input.name}
options={options}
label={label}
placeholder={placeholder}
search
multiple
selectOnBlur={selectOnBlur}
onFocus={::this.handleFocus}
onBlur={::this.handleBlur}
onChange={::this.handleChange}
defaultValue={defaultValue || []}
value={input.value}
loading={loading} />