I have a multiple choice dropdown menu that populates with data that is stored in my database. When I try adding or deleting one of the options in the dropdown menu, the change is not reflected in the field. My code is below:
<div className={styles.below}>
Items:
{items.map(item =>
<Field
key={item}
name="items"
component={AutoComplete}
required={true}
options={item}
/* placeholder={initialData.tas} */
value={values.items}
onChange={handleChange}
/>
)}
</div>
I want the changes I make to be reflected in the dropdown menu field. Currently, if I click to add an option that wasn't selected, or if I click to un-add an option that was already selected, nothing happens. Any help would be greatly appreciated :)
Related
I'm designing a basic form using react bootstrap and #material_ui/core elements
I've noticed if I press enter when I'm in one of the TextFields the URL is updated as follows:
originally:
http://localhost:8080/home
after pressing enter in TextField:
http://localhost:8080/home?listName=&welcome=&eventDate=
code in question:
<Form>
<Form.Group>
<TextField
name="listName"
variant="outlined"
value={this.state.listName}
onChange={this.handleChange}
label="Name of List"
fullWidth
/>
</Form.Group>
...
<Button variant="link" onClick={this.purchase}>Purchase</Button>
</Form>
The form and button are imported from 'react-bootstrap'
the textfield is from '#material-ui/core'
I've searched and haven't found anything directly related to this so any help in disabling this functionality on pressing Enter would be appreciated.
It means that your form is submitted when you press Enter. If you want to prevent form submission, add this prop to the form element (within your Form Component code):
onSubmit={event => event.preventDefault()}
I have a web project I am writing and I've come across a problem i'm trying to display a check box with a label... the checkbox shows but no label
I've went to https://material-ui.com and found found some code to implement and it shows the Checkbox but no label.
{this.props.value === 3 ? (
<div>
<label htmlFor='chkInsulin'>
<CheckBox name='chkInsulin' /> Take Insulin
</label>
</div>
) : (
''
)}
their are no error message.. what i expect it to do if I enter 3 in the text field it's supposed to show a checkbox with a label... but it shows the checkbox pushed over from center and can't see label can anyone help me?
Would you consider doing something like this instead:
<FormControlLabel
control={
<Checkbox/>
}
label="Take Insulin"
/>
This is from https://material-ui.com/components/checkboxes/
I am working on a question/answer app, The app has a functionality that when user goes back to the previous question he should be able to see his/her previous answer. So in a component i am showing options in the form of radio buttons to user by looping over the choices. I am saving user current answers in an array in redux store. So when user goes back to previous question i fetch his/her last answer and update the RadioGroup value in componentDidUpdate() but it doesn't update FormControlLabel check.
<FormControl component="fieldset">
<RadioGroup
aria-label="position"
name="position"
value={this.state.answers}
onChange={this.handleChange}
>
{this.state.currentChoices.map(choice => (
<FormControlLabel
value={choice.label}
control={<Radio color="primary" />}
label={choice.label}
labelPlacement="end"
key={choice.label}
/>
))}
</RadioGroup>
</FormControl>
i console the value of RadioGroup (i.e: this.state.answers) it is updating but FormControlLabel is not getting checked
just get sure that the data types are correct. the value of the FormControlLabel is often getting converted to string. had the same problem right now.
I am trying to use the DateTimePicker component from react-widgets
Is it possible to disable keyboard input (and copy pasting) for the DateTimePicker input field and only constrain dropdown selection.
The disable API disables everything, including the dropdown selection menu. My intent is to constraint which values the user is allowed to select, and I can only do it from the dropdown menu.
Try this:
<DateTimePicker
inputProps={{
component: props => <input {...props} readOnly />
}}
/>
There's an active issue in react-widgets
repo to allow to set readOnly for just the input, which would accomplish this task more elegantly.
I solved it by handling onChangeRaw that listens for changes on the input and setting the current field value to empty string.
<DatePicker
value={this.state.startDate}
onChangeRaw={event =>
this.setState({startDate: ''})}
onChange={value =>
this.setState({startDate: value})}
/>
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} />