I am using this to create a checkbox group:
https://github.com/ziad-saab/react-checkbox-group
I need to disable the first checkbox generated.
Does anyone know the props to do it?
I have tried:
<label><Checkbox value={i} disabled /> {passo.title}</label>
<label><Checkbox value={i} disabled={true} /> {passo.title}</label>
<label><Checkbox value={i} disabled=true /> {passo.title}</label>
i am guessing you want to check and disable the checkbox at the same time. It can be done by passing the values to be checked as an array to the value property of CheckboxGroup component as follows
<CheckboxGroup name="passos" value={[0,1]} onChange={this.passosChanged}>
I've used a value of {[0,1]} for example . And as statated before you can pass disabled to your <Checkbox> component. Attaching CodeSample link below.
https://codesandbox.io/s/kwy7x46mjr
In case i have missed something , kindly clarify more !
Related
How we can reset selected values, like if I want to change selected values.
<Multiselect
options={this.state.robotTrackers}
onSelect={this.onSessionSelectRemove.bind(this)}
onRemove={this.onSessionSelectRemove.bind(this)}
displayValue="name"
closeOnSelect={true}
id="selectTracker"
ref={this.multiselectRefTracker}
placeholder="Select advertiser's tracker"
selectionLimit={5}
style={multiselectCustomStyle}
/>
I am trying this but it only clear all selected values not update.
this.multiselectRefTracker.current.resetSelectedValues(['1'])
I'm so sorry I found Multiselect before discovering MultiSelect, not only is its update mechanism non-standard for React (using createRef instead of setting the element's value) but I found it impossible to get resetSelectedValues to work, period.
I know it's not technically an answer to your question, but for anyone else stuck with this I would recommend migrating to MultiSelect instead.
You are on the right path.
Use this.this.multiselectRefTracker.current.resetSelectedValues() instead of this.multiselectRefTracker.current.resetSelectedValues(['1'])
I hope this would help you.
Is there a built-in option or easy trick to auto close a react-select input once the user has selected the last available item?
I use the option closeMenuOnSelect={false} so that I can keep selecting choice (no menu close between them), but there is no need to keep it displayed with a "No item" message once I've selected all of them, I'd like it to close automatically.
I could implement such a behaviour, but it's redundant boilerplate, so I'm looking for built-in solution, but didn't find any at https://github.com/JedWatson/react-select#props
I've created a feature request for this https://github.com/JedWatson/react-select/issues/3936
There's a react-select functionality where you can set the props noOptionsMessage to null so the menu will close when there are no more options to select from.
// react component
<Select
...
isMulti
noOptionsMessage={() => null}
/>
Documentation: https://github.com/JedWatson/react-select#props
Here are 2 ways to go about it:
First is to use the noOptionsMessage prop which will close the component when no options are left to select:
<Select
...
noOptionsMessage={() => null}
/>
Second way is to achieve this by using the built-in menuIsOpen flag.
This way your select menu will remain open as long as you tell it there are options available:
// in your react component...
state = {
isOptionsExist: /* code to determine if options are available */
}
<Select
...
/* pass in state param */
menuIsOpen={isOptionsExist}
/>
to close the menu on select you should use this prop
closeMenuOnSelect={true}
I'm using react JS and I have a problem. I don't know how to get the value from my dropdown and put that value into a onclick button. I have read lots of topics but I haven't find anything really useful for a beginner like me.
I am using "scheduler" that helped me built my dropdown and some other stuffs.
So, my dropdown get data from a local file and looks like this:
{values.map(v => (
<option value={this.value}>{v.value}</option>
))}
console.log(ref)
And my button is like this:
<Button onClick={() => this.decrement()}>
Ajouetr la réservation
</Button>
The decrement method was only there to test if it was working, and it is.
Actually, what I want to do is quite simple: I have some values in my dropdown (from 1 to 7). And I have a state that says there is 30 places available. What I want is when I choose a specified item in my dropdown AND validate with my button and then my state to decrement with the specified number. Because right now it only decrement with 1.
I hope it's clear enough for someone to help me, because I spent 2 days on that problem and I don't know what to do.
Thank you :)
Next time, it's nice to provide an interactive example with your question. Here's a CodeSandbox I made that (I hope) illustrates your example (link). If you want to fiddle with the example, just click "Fork" in the top right corner.
Back to the solution:
I think what you're missing is storing the selected value in your state along with the 30 "places". What you want is to make your <select /> tag into a "controlled component". When someone interacts with the <select /> you want to change the internal state so that it matches the selected value. That way, when you call decrement() from your button, you can use the internal state's value rather than getting it from a ref (I think that's what you were trying to do).
Here's a link to the React doc that explains how to use forms, specifically the <select /> tag: (link).
Take care!
I would say that you can think about this in 2 different steps:
SET THE QUANTITY STATE
Set the state with the current dropdown value - For achieving this, you can just use the onChange method in your select:
<select name="quantity"
value={this.state.quantity}
onChange={this.onSelectQuantity}
>
In your constructor, you create a variable quantity inside your state
Create a function called onSelectQuantity where you will set the quantity state with setState.
Do not forget to bind the function onSelectQuantity on the constructor.
With this, every time that you change the value on select, your state would capture its value. You can log it from the function if you want to test if it works.
DECREMENT FROM THE BUTTON
After this, you can just decrease the value of the state again from decrement function
<Button onClick={this.decrement}>
Ajouetr la réservation
</Button>
You will have a function...
decrement() {
const newQuantity = this.state.quantity - 1;
this.setState({
quantity: newQuantity
})
}
Hope it helps!
I prepared a demo on JS Fiddle to demonstrate the problem.
Please, have in mind that in my real world example I have a lot of custom logic - which I've skipped here - that's why some parts of the code in the JS Fiddle (may) look strange.
===
The problem - if you click on the labels - the wrapper and the inner components get updated and rendered correctly.
However - if you click on the checkboxes themselves - then the wrapper gets updated, but the checkboxes doesn't render correctly.
https://jsfiddle.net/dbjfvsm2/5/
At the same time - if I directly call the property handler from the checkbox - then all is fine:
https://jsfiddle.net/dbjfvsm2/6/
I tried with onChange as well, but same result.
Why is this happening? ... And I really need to have that instance method - onItemClick - that is reused by both the label and the checkbox, this is where some general stuff is happening.
The only thing preventing checkbox to being checked is e.preventDefault(); in onItemClick function. Try removing it and it will work.
onItemClick = (e, id) => {
this.props.handleCheckboxClick(id);
}
Why it didn't work? Your answer is here
I've updated your fiddle in order to get your desired result
https://jsfiddle.net/sabbin/kh4j1Ltp/12/
You should not use the verification in the child component in the first place, also e.preventDefault was causing the an issue in your logic. Also avoid using arrow functions inside the render, you could bind the eventHandler to the class it self
LE:
I changed the checkbox logic in the exaple to use a generator, but you can write them one by one
Instead of
{checkboxes.map((id)=>(
<Checkbox
handleCheckboxClick={this.handleCheckboxClick}
selected={this.state.selectedCheckboxes.indexOf(id) > -1}
id={id}
/>
))}
You can write them directly
<Checkbox
handleCheckboxClick={this.handleCheckboxClick}
selected={this.state.selectedCheckboxes.indexOf("item-two") > -1}
id="item-two"
/>
<Checkbox
handleCheckboxClick={this.handleCheckboxClick}
selected={this.state.selectedCheckboxes.indexOf(item-one") > -1}
id="item-one"
/>
I am trying to make "required" a TextField in select mode.
I tried to add required prop like in this snippet, but this does not block the submit event if I haven't select anything. Although it adds the '*' to the label.
Please check this sandbox
<TextField
id="select-currency"
select
label="Select"
value={this.state.currency}
onChange={this.handleChange("currency")}
required
>
{currencies.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
UPDATE: (Clarification really)
I am talking about html5 validation. In the sandbox example there are Select and Text fields, setting the text field as required will block the submit event and displays a native html5 error saying "this field is required", this is not the case if the field is "select".
Material Ui provides another component Native Select to handle this kind of native validation.
Please check this example
It was recently implemented in material ui. If you upgrade #material-ui/core to version 4.11.0 it will work https://github.com/mui-org/material-ui/issues/20402
It's not field responsibility to control form behavoiur. It's parent-child relation and top-down data passing.
Form (component) provides current value to component (validity information, change handler) to field component. Field displays content using styles and elements depending on props (* when required, error border etc) but it's form' role to decide about value/validity/submiting.