I have a react table where I am showing and hiding columns individually on a checkbox click. If I remove the checked property from the checkbox input element things work as expected. However if I add it in and track the checked property using state, the check box will click off the first time but not back on but the column state does update and reappears.
Eventually my end goal is to be able to click the "remove all columns" option at the top of this list to show hide all columns. The show/hide piece works but the checking of the boxes does not.
updateColumnShow = fieldName => {
this.setState({ [fieldName]: !fieldName });
this.setState(state => {
const columns = state.columns.map(column => {
if (column.Header === fieldName) {
column.show = !column.show;
return column;
} else {
return column;
}
});
return { columns };
});
};
render() {
return (
<div>
{this.state.columnList.map(listItem => (
<li key={listItem}>
<input
id={listItem}
checked={this.state[listItem]}
className="form-check-input"
type="checkbox"
name={listItem}
onChange={() => this.updateColumnShow(listItem)}
/>
<label>{listItem}</label>
</li>
))}
</div>
);
}
I have created a CodeSandbox to demo the issue.
What am I overlooking?
You're passing a string (fieldName) to updateColumnShow, and then negating it as a boolean; this will always be false.
updateColumnShow = fieldName => {
this.setState({ [fieldName]: !fieldName });
}
The immediate fix is to invert your state value instead:
this.setState({ [fieldName]: !this.state[fieldName] });
Related
import Select, { components } from "react-select";
...
handleBookKeyWordDropDown (key_wor) {
let keys;
if (key_wor !== null) {
keys = key_wor;
} else {
keys = []
};
this.setState({
currentBook:{
key_words: keys
}
});
}
handleBookBBKDropDown (bbks) {
let bks;
if (bbks !== null) {
bks = bbks;
} else {
bks = []
};
this.setState({
currentBook:{
bbk: bks
}
});
}
...
<div className="row justify-content-end">
<div className="col-4">
<label>Ключевые слова:</label>
</div>
<div className="col-8">
<Select
closeMenuOnSelect={false}
options={this.state.key_words}
value={this.state.currentBook.key_words}
getOptionLabel={ x => x.name}
getOptionValue={ x => x.id}
onChange={this.handleBookKeyWordDropDown}
isMulti
isSearchable
placeholder="Выберите ключевые слова"
/>
</div>
<div className="row justify-content-end">
<div className="col-4">
<label>ББК:</label>
</div>
<div className="col-8">
<Select
closeMenuOnSelect={false}
options={this.state.bbk}
value={this.state.currentBook.bbk}
getOptionLabel={ x => (x.code+' '+x.description)}
getOptionValue={ x => x.id}
onChange={this.handleBookBBKDropDown}
isMulti
isSearchable
placeholder="Выберите ББК"
/>
</div>
</div>
</div>
So the logic is:
initially every one of them has its own default value, which should be changed while changing selected values.
Issue appears when I change anything in any of Select: if I remove any selected value from any Select, other Select's selected values are being removed. But after that if I add something to anything or remove, everything works fine.
This is how it happens
Have no idea how to deal with it, possibly because of lack of experience with React.
Looking for some help, guys! :)
You have currentBook as an object which store the value of both select fields and onChange you are creating a new object with single select value overriding the second select value
Change your code to this
handleBookBBKDropDown (bbks) {
let bks;
if (bbks !== null) {
bks = bbks;
} else {
bks = []
};
this.setState({
currentBook:{
...this.state.currentBook, bbk: bks
}
});
}
handleBookKeyWordDropDown (key_wor) {
let keys;
if (key_wor !== null) {
keys = key_wor;
} else {
keys = []
};
this.setState({
currentBook:{...this.state.currentBook,
key_words: keys
}
});
}
Here, I am using to Spread operator to use previous currentBook object and overriding only changed select value
The problem is that you are overriding the state values of other dropdown. You have to keep other state value in current state.
First declare your state like this:
this.state = {currentBook:{bbk:[],key_words:[]}}
Then do this:
// handleBookKeyWordDropDown
this.setState({currentBook:{
...this.state.currentBook,
key_words: keys
}
});
// handleBookBBKDropDown
this.setState({currentBook:{
...this.state.currentBook
bbk: bks
}
});
I have the following tooltip component:
export interface ITooltipProps {
Title: string;
Visibility: boolean;
Items: any[];
}
export const Tooltip: React.StatelessComponent<ITooltipProps> = (props) => {
if (!props.Visibility) {
return null;
}
return (
<div className={css.toolTip} role="tooltip" style={{margin: props.Margin}} aria-hidden={props.Visibility}>
<h1 className={css.toolTipHeader}>{props.Title}</h1>
<ul className={css.itemList}>
{props.Items.map((o) => {
return (
<li key={o.ID}>{o.Data}</li>
);
})}
</ul>
</div>
);
};
That gets called from another component like:
<div onMouseOver={this.showtooltip} onMouseLeave={this.hidetooltip}>
<Tooltip Title={strings.SecurityGroup_Label_ManagementOffices} ManagementOffices={offices} Visibility={this.state.IsToolTipVisible} />
</div>
private showtooltip = () => {
this.setState({ IsToolTipVisible: true });
}
private hidetooltip = () => {
this.setState({ IsToolTipVisible: false });
}
The problem I'm facing is, since there's one IsToolTipVisible, if I have multiple tooltips in the component, it displays/hides it all the tool tips at once. How do I code this so that it only displays the item being hovered over?
This can go into comments but adding it as an answer since it's big.
I can think of two ways now using your unique id (expecting it to be a id in the object we set to tooltip and not html id attributes)
you can use uniqueid and instead of saving a Boolean of istooltipvisible, save which one is currently visible.
And in the place where you check for istooltipvisible with Boolean, use something like eachuniqueid === currentvisibleid
Using this, you will have only one tooltip at a time which could be a concern.
You can save a property istooltipvisible for each tooltip and whenever you have it visible, set it to true and when you close it, set it to false.
This way you can manage multiple tooltips aswell.
I need to bind ErrorMessage to textfield only when user press button. In this there are nice examples how to use errormessage but the problem is that I don't know how to make append errorMeesage after user click
<TextField id='titleField' value={titleValue} required={true} label={escape(this.props.description)} onGetErrorMessage={this._getErrorMessage} validateOnLoad={false} />
And this is a call of a button:
private _buttonOnClickHandler() {
let textvalue = document.getElementById('titleField')["value"];
if(textvalue === "")
{
//call onGetErrorMessage or something that will set ErrorMeesage and input will be red
}
return false;
}
Thank you
The easiest way I can think of to accomplish this is by predicating the onGetErrorMessage on a state check, which tracks whether the button has been clicked.
<TextField
id='titleField'
value={titleValue}
required={true}
label={escape(this.props.description)}
// Only allow showing error message, after determining that user has clicked the button
onGetErrorMessage={this.state.buttonHasBeenClicked ? this._getErrorMessage : undefined}
validateOnLoad={false}
/>
Then in your button click handler, simply set that state value:
private _buttonOnClickHandler() {
this.setState({ buttonHasBeenClicked: true });
return false;
}
As long as you instantiate buttonHasBeenClicked to be false, then this method will meet the requirement that (a) before the user clicks the button, no error messages are shown by the TextField, and (b) after the user clicks the button, error messages start to be shown. You retain the ability to use _getErrorMessage(value) to customize the error message based upon the current value in the TextField.
You need to set state for displaying/hiding error messages based on user input, Check below code
import React, { Component } from 'react';
class App extends Component {
state = {
isErrorMessageHidden: true
}
clickHandler = () => {
let textValue = document.getElementById('titleField').value;
if(textValue === '')
this.setState({isErrorMessageHidden: false});
else
this.setState({isErrorMessageHidden: true});
}
render() {
return (
<div>
<button onClick={this.clickHandler}>Check</button>
<input type='text' id='titleField' />
<p
style={{'color':'red'}}
hidden={this.state.isErrorMessageHidden}
>Please fill the form</p>
</div>
);
}
}
export default App;
I hope this helps.
Yet another approach would be to handle all the validations via state values.
The control definition goes like this
<TextField placeholder="Enter a venue location" required onChange={this._onVenueChange} {...this.state.errorData.isValidVenue ? null : { errorMessage: strings.RequiredFieldErrorMessage }}></TextField>
On the Onchange event, you validate the control's value and set the error state value as below,
private _onVenueChange = (event: React.FormEvent<HTMLTextAreaElement | HTMLInputElement>, newValue?: string): void => {
this.setState(prevState => ({
errorData: {
...prevState.errorData,
isValidVenue: newValue && newValue.length > 0,
isValidForm: this.state.errorData.isValidForm && newValue && newValue.length > 0
}
}));
this.setState(prevState => ({
formData: {
...prevState.formData,
venue: newValue
}
}));
}
In the above example, I am using two objects within states, one for capturing the values and other for capturing whether the field is error-ed or not.
Hope this helps..
Cheers!!!
I have been searching on Google all day to try and find a way to solve my issue.
I've created a "product selection page" and I'm trying to add a "select all" checkbox that will select any number of products that are displayed (this will vary depending on the customer).
It's coming along and I've got all the checkboxes working but I can't get "select all" to work. Admittedly I'm using some in-house libraries and I think that's what's giving me trouble as I'm unable to find examples that look like what I've done so far.
OK, so the code to create my checkboxGroup is here:
let productSelectionList = (
<FormGroup className="productInfo">
<Field
component={CheckboxGroup}
name="checkboxField"
vertical={true}
choices={this.createProductList()}
onChange={this.handleCheckboxClick}
helpText="Select all that apply."
label="Which accounts should use this new mailing address?"
/>
</FormGroup>
);
As you can see, my choices will be created in the createProductList method. That looks like this:
createProductList() {
const { products } = this.props;
const selectAllCheckbox = <b>Select All Accounts</b>;
let productList = [];
productList.push({ label: selectAllCheckbox, value: "selectAll" });
if (products && products.length > 0) {
products.forEach((product, idx) => {
productList.push({
label: product.productDescription,
value: product.displayArrangementId
});
});
}
return productList;
}
Also note that here I've also created the "Select All Accounts" entry and then pushed it onto the list with a value of "selectAll". The actual products are then pushed on, each having a label and a value (although only the label is displayed. The end result looks like this:
Select Products checkboxes
I've managed to isolate the "select all" checkbox with this function:
handleCheckboxClick(event) {
// var items = this.state.items.slice();
if (event.selectAll) {
this.setState({
'isSelectAllClicked': true
});
} else {
this.setState({
'isSelectAllClicked': false
});
}
}
I also created this componentDidUpdate function:
componentDidUpdate(prevProps, prevState) {
if (this.state.isSelectAllClicked !== prevState.isSelectAllClicked && this.state.isSelectAllClicked){
console.log("if this ", this.state.isSelectAllClicked);
console.log("if this ", this.props);
} else if (this.state.isSelectAllClicked !== prevState.isSelectAllClicked && !this.state.isSelectAllClicked){
console.log("else this ", this.state.isSelectAllClicked);
console.log("else this ", this.props);
}
}
So in the console, I'm able to see that when the "select all" checkbox is clicked, I do get a "True" flag, and unclicking it I get a "False". But now how can I select the remaining boxes (I will admit that I am EXTREMELY new to React/Redux and that I don't have any previous checkboxes experience).
In Chrome, I'm able to see my this.props as shown here..
this.props
You can see that this.props.productList.values.checkboxField shows the values of true for the "select all" checkbox as well as for four of the products. But that's because I manually checked off those four products for this test member that has 14 products. How can I get "check all" to select all 14 products?
Did I go about this the wrong way? (please tell me that this is still doable) :(
My guess is your single product checkboxes are bound to some data you have in state, whether local or redux. The checkbox input type has a checked prop which accepts a boolean value which will determine if the checkbox is checked or not.
The idea would be to set all items checked prop (whatever you are actually using for that value) to true upon clicking the select all checkbox. Here is example code you can try and run.
import React, { Component } from 'react';
import './App.css';
class App extends Component {
state = {
items: [
{
label: "first",
checked: false,
},
{
label: "last",
checked: false,
}
],
selectAll: false,
}
renderCheckbooks = (item) => {
return (
<div key={item.label}>
<span>{item.label}</span>
<input type="checkbox" checked={item.checked} />
</div>
);
}
selectAll = (e) => {
if (this.state.selectAll) {
this.setState({ selectAll: false }, () => {
let items = [...this.state.items];
items = items.map(item => {
return {
...item,
checked: false,
}
})
this.setState({ items })
});
} else {
this.setState({ selectAll: true }, () => {
let items = [...this.state.items];
items = items.map(item => {
return {
...item,
checked: true,
}
})
this.setState({ items })
});
}
}
render() {
return (
<div className="App">
{this.state.items.map(this.renderCheckbooks)}
<span>Select all</span>
<input onClick={this.selectAll} type="checkbox" checked={this.state.selectAll} />
</div>
);
}
}
export default App;
I have items in state. Each item has a checked prop which I pass to the checkbox getting rendered for that item. If the prop is true, the checkbox will be checked otherwise it wont be. When I click on select all, I map thru my items to make each one checked so that the checkbox gets checked.
Here is a link to a codesandbox where you can see this in action and mess with the code.
There is a package grouped-checkboxes which can solve this problem.
In your case you could map over your products like this:
import React from 'react';
import {
CheckboxGroup,
AllCheckerCheckbox,
Checkbox
} from "#createnl/grouped-checkboxes";
const App = (props) => {
const { products } = props
return (
<CheckboxGroup onChange={console.log}>
<label>
<AllCheckerCheckbox />
Select all accounts
</label>
{products.map(product => (
<label>
<Checkbox id={product.value} />
{product.label}
</label>
))}
</CheckboxGroup>
)
}
More examples see https://codesandbox.io/s/grouped-checkboxes-v5sww
Im quite new to react and I am working on a registration page checkbox element
And below is the Choice component implementation,
const ChoiceItem = ( { options, itemId, selectedIndex, onChange } ) => (
handleChange: function(checked){
const value = [];
options.map( option, i ) => (
value[ i ] = checked;
)
},
<Card>
{
options
.map( ( option, i ) => (
<Checkbox
id={ `Choiceitem-checkbox-${ i }-${ itemId }` }
key={ i }
label={ option.text }
style={ styles.checkbox }
value={ '' + i }
onChange={ ( checked ) => onChange( itemId, [ i ], checked ) }
/>
) )
}
</Card>
);
What I want to do over here is to loop through the options and get there values in to an array named value and call back the handleAnswerChange in registration form and set the value over there. Can anyone tell me how I can archive that?
Thank you.
Sounds like the best solution for you is two way binding. You can check out the react docs on adding two way binding.
react two way binding.
Another option would be using jquery
You are actually very close to having this one. I would update your handleChange in MultipleChoiceItem:
handleChange = (index) => (checked) => {
const newValues = options.map((option, i) => {
// if it is the changed returned the new state
// otherwise just return the current value
return index === i ? checked : option;
});
this.props.onChange(this.props.itemId, newValues);
};
Then inside of your render I would set the onChange:
onChange={this.handleChange(i)}
This should then update state on your MyRegisterForm on each checkbox click.