I have created a Checkbox group in ant-design with react JS. Now, I want to use Buttons, Instead of checkboxes there. One button per one value.
Here is my code.
<Checkbox.Group>
<ul className="ul-custom">
{this.props.symptomsForCheckbox.map((symptom) => {
return (
<li>
<Checkbox value={symptom.id}>
symptom.nameEnglish
</Checkbox>
</li>
);
})}
</ul>
</Checkbox.Group>
And here it looks like
What I want is to add buttons, instead of checkboxes. The below image shows that.
And the code that I used is,
<Checkbox.Group>
<ul className="ul-custom">
{this.props.symptomsForCheckbox.map((symptom) => {
return (
<li>
<Button value={symptom.id}>
symptom.nameEnglish
</Button>
</li>
);
})}
</ul>
</Checkbox.Group>
But this doesn't work as checkboxes. Any idea for fixing this?
Thanks in advance
This is my creation.
You can check only one or uncheck all.
And I provided simple CSS that looks like Radio.Button.
https://stackblitz.com/edit/react-bsyhkm?file=index.js
I created new version with vertical and width option as you want.
https://stackblitz.com/edit/react-bsyhkm-n7umzv?file=styled.js
Not sure if you are still searching, but I had the same issue and found a really good example on the sandbox here.
It doesn't actually use any antd library, but I think it looks pretty similar, and tweaking it a bit more to appear consistent with the rest of the UI should be pretty trivial.
May be you can try,
On button click event change the state (state = !initialstate)(ie. reverse initialstate), set initialstate to false. and then set values of checkbox based on state of button.
Related
I am using code below to avoid " nested" JS error and keeping Link properties inside a react-bootstrap Dropdown.
<Dropdown.Item className="dropdown-item" as={Link} href={`/example`}>
Example
</Dropdown.Item>
Result is as follow on the DOM:
Example
Problem is: className="dropdown-item" has been ignored.
How could I get this result: Example while keeping the code "react-friendly"?
You can try to wrap it around.
<Link to={`/example`}><Dropdown.Item className="dropdown-item">
Example
</Dropdown.Item></Link>
you can use bsPrefix to override the bootstrap styling ...
Docs reference ...
A sample e.g. here in below link - see dropdown first item's bg color... Please fork it for reference
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 am trying to keep all the Panels open when the page loads for the first time.
Using Antd Collapse and there is already an option to add the key of the panel as an array of string , so that the mentioned panels will be open by default.
I am finding it difficult to obtain this key. Is there any other way to make all the panels open on first load (like example use any props in the collapse to keep it open)? I have written the toggle panel on click. That works fine.
Specify all active keys in defaultActiveKey list
<Collapse defaultActiveKey={['1', '2']}>
<Collapse.Panel header="Group name" key="1">
...
</Collapse.Panel>
<Collapse.Panel header="Group name" key="2">
...
</Collapse.Panel>
</Collapse>
Or if you want to use dynamic keys use this way
const panels = [{name: '1'}, {name: '2'}]
<Collapse activeKey={panels.map(panel => panel.name)}>
{
panels.map(panel => (
<Collapse.Panel header={panel.name} key={panel.name}>
...
</Collapse.Panel>
));
}
</Collapse>
What kind of keys are you trying to use? Are they generated in some way or other? Or can you just use a simple numeric index?
Let's say you have 5 panels, and the id's would be 0-4, a simple map alone would generate the array of indices:
const arrayOfKeys = panels.map((panel, index) => index);
I suppose the next alternative is to try and access the properties of the panel itself and run a handler on them:
const arrayOfKeys = panels.map((panel) => panel.props.someFunc());
Hopefully I am not over simplifying what you have described, but perhaps you can share some code.
Hope this helps.
I have a wrapper for a notifications dropdown in an app top-bar that is working fine for my click away from dropdown to close the list. When I add a key to the list elements it breaks the functionality and clicking on a notification closes the dropdown.
Ex: This breaks and onclick it closes the dropdown menu
<li key={key} className="media notification">
1
</li>
Ex: This works and clicking the notification does not close dropdown but warns a key is needed.
<li className="media notification">
1
</li>
I'm not 100% sure I am doing something incorrectly but wanted to ask if there is something with a react key that would cause a behavior like this?
Only explanation I can come up with is that your key is invalid.
Make sure its a string, make sure they are all unique and preferably base the key upon data input, not the index. Check the docs for more info.
Im working in a school project, a minesweeper. Will be 20x20, so it has 400 buttons. Its there a way to add an actionEvent/actionPerformed and implement a generalized method for the whole array? Or there is an easier way?
Maybe something like that (using jQuery for convenience but you can do it with Vanilla JS too):
Your HTML:
<div id="buttonsHolder">
<button data-num=1>1</button>
<button data-num=2>2</button>
<button data-num=3>3</button>
...
<button data-num=4>4</button>
</div>
Your JavaScript:
$('#buttonsHolder').on('click', 'button', (function(evt){
var buttonNum = $(this).attr('data-num');
// Now, buttonNum variable holds the button number has clicked.
});
Of course instead of use data-num atribute you can use whatever data you need.
You are placing the buttons inside a container (i suppose). Add a actionhandler to that to capture a click. And read the 'target' variable of the event, and see if that is a button