I'm using TextField in one of my components, but all events work except onChange.
<TextField onChange={this._onSectionChange} />
private _onSectionChange= (event: React.FormEvent<HTMLInputElement |
HTMLTextAreaElement>): void => {
alert(event.currentTarget.value);
}
From the documentation, it mentions that the interface of onChange event is:
(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
newValue?: string) => void
but in my code it only accepts:
onChange?: (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => void
I bound the method in constructor, also tried:
onChange={()=>alert('something!')}
it's not firing at all!
Check your console for errors, something else might have caused it.
For example: https://codepen.io/mohamedhmansour/pen/pQxOLR
<TextField onChange= {(e, text) => this.setState({text})} />
<Label>{this.state.text}</Label>
Related
How can I not allow a user to type numbers on my CreatableSelect component?
<CreatableSelect
onKeyDown={handleNumberInput}
components={animatedComponents}
isSearchable={true}
isMulti
options={selectTags}
onChange={newTagsSelectedfunction}
/>
I'm trying to do it with onKeyDown but wonder if it could accept a pattern property
I found a solution by accessing the key property of the event
const handleNumberInput = (e) => {
if (Number.isInteger(Number(e.key))) {
e.preventDefault();
}
};
I am trying to use AsyncSelect from react-select library.
I have enabled cacheOptions option.
Using below mentioned steps I am seeing an issue with loadOptions
Search for a string test
List of options gets displayed
Clear the input field
Enter same string again test
Immediately displays same list of options
loadOptions fires an API with search input tes
Clear the input field
Enter same string again test
Immediately displays same list of options
loadOptions fires API with search input te.
I am not sure why loadOptions getting fired in this scenario if I am entering the same search string.
Here is the AsyncSelect
<AsyncSelect
classNamePrefix="select-item"
onChange={ onOptionSelect }
getOptionValue={ item => item.id }
placeholder="Search by Item"
formatOptionLabel={ company => <CompanyWithIcon Item={ Item } /> }
loadOptions={ loadOptions }
styles={ customStyles }
isSearchable
cacheOptions
isClearable
/>
Here is the loadOptions function
const loadOptions = inputValue => searchItem(inputValue);
Can anybody please help?
I think it is happening because you are not using a callback or a promise for loadOptions. The loadOptions should return a promise.
Reference doc -> https://react-select.com/props#async-props says:
loadOptions:
Function that returns a promise, which is the set of options to be used once the promise resolves.
It should be like below:
const loadOptions = (inputValue, callback) => {
setTimeout(() => {
callback(searchItem(inputValue));
}, 1000);
};
A user object has an array prop schools that references one or more school objects. I would like to use a <List> with <CheckBox> to mutate the schools array.
I load the user object into the view, and I load the listOfSchools (from the application state) to generate the checkbox list:
<List data={listOfSchools} keyExtractor={ item=> item._id } renderItem={({item})=>renderItem(item)} />
The renderItem function:
const renderItem = (school) => {
return <ListItem
title={school.name}
accessory={()=>renderAccessory(school)}
/>
};
The renderAccessory function:
const renderAccessory = (school) => {
return <CheckBox checked={() => checkSchool(school._id)} onChange={()=>changeSchool(school._id)} />
}
The checkSchool function returns boolean on if the school._id is referenced in the user.schools array. The changeSchool function adds or removes the school._id from the users.schools array.
The changeSchool function:
const changeSchool = (schoolId) => {
let checked = checkSchool(schoolId);
if (!checked) {
// add schoolId to user.schools
} else {
// remove schoolId from user.schools
}
}
This drastically does not work. It appears that no matter what I use to mutate the state, the checkboxes never update, nor does the user.schools array mutate.
What is the proper way to structure such a design goal?
Assuming that you use UI Kitten, I can see that you got the checked prop value wrong for the CheckBox component.
UI Kitten CheckBox reference
The checked prop needs to be a boolean not a Callable as you have it there
I would try to change the code like this:
const renderAccessory = (school) => {
const isChecked = checkSchool(school._id);
return <CheckBox checked={isChecked} onChange={()=>changeSchool(school._id)} />
}
Let me know if that helped.
While trying various solutions i can conclude few things here:
With the solution given by #Cornel Raiu the checked and unchecked flags are getting correctly calculated however, the display was not correct with the state of checked/unchecked
I replaced Checkbox with Toggle, just to be sure that it works with iOS too
PROBLEM that i faced still is that, even the State of item getting toggled is correctly populating it was getting reset
The outside container of Toggles is List and ListItem,
OBSERVATION is that the Press event on List was actually getting the Checkbox/Toggle into correct Display State...
SOLUTION:
After longer time of research and experiments I got my thing working with following approach -
I maintained separate collection of Checked Items
There is already a state of Collection of master items, as input to List
Every time the Checkbox/Toggle is clicked, the master list of Data is cloned and copied back to its state
This was triggering the slight re-render of component and thing is working as expected.
const [cashTransactions, setCashTransactions] = useState([]); // master data
const [selectedTransactions, setSelectedTransactions] = useState([]); // selected data
const renderItem = ({ item, index }) => (
<ListItem
title={'('+item.id + ') ' + item.firstName + ' ' + item.lastName}
description={Moment(item.createdOn).format('yyyy-MM-DD hh:mm:ss')}
accessoryLeft={selectedTransactions.includes(item.id) ? RadioOnIcon : RadioOffIcon}
accessoryRight={() => checkBoxSpace(item)}
/>
);
const checkBoxSpace = (item) => {
let itemChecked = selectedTransactions.includes(item.id);
return (
<View style={styles.actionContainer}>
<Button size='tiny' status='basic' accessoryLeft={rupeeSymbol}>{item.amount}</Button>
<Toggle checked={itemChecked} status='primary' size='small' onChange={checked => checkboxChecked(item, checked)}></Toggle>
</View>
)
}
const checkboxChecked = (item, checked) => {
console.log('Item -' + item.id + ' ' + checked);
if (checked) {
if (!selectedTransactions.includes(item.id)) {
selectedTransactions.push(item.id);
}
} else {
if (selectedTransactions.includes(item.id)) {
selectedTransactions.pop(item.id);
}
}
console.log('selectedTransactions ' + JSON.stringify(selectedTransactions));
// This is the thing i applied to get it done.
const cloned = [...cashTransactions];
setCashTransactions(cloned);
}
// View
<List
style={styles.container}
data={cashTransactions}
renderItem={renderItem}
/>
i was using vue-mapbox and wanted to get an event every time theres a zoom change, is that possible with vue-mapbox? or if i can use any other alternative options?
or as an alternative if theres a click event for the <MglNavigationControl /> component which controls the zoom?
it tried adding #click on the <MglNavigationControl #click="click" /> but it doesnt work
method : {
click(){
alert('zoom button clicked')
}
}
AFAIK there's no event or action exposed in vue-mapbox for working with zoom events. You've to work around this by doing something like this:
<VueMapbox
mapStyle="mapbox://styles/mapbox/streets-v9"
accessToken="<token>"
#load="onMapLoad"
/>
methods: {
onMapLoad({ map }) {
map.on("zoomend", e => {
alert('Zoom end: ' + e.target.getZoom());
});
}
}
I want to use react-native-flexi-radio-button in my project to select one of the item in list form array and use this code
{this.state.Rooms.map(function (value,index) {
console.log(value.id)
return(
<RadioGroup onSelect ={(index, value) => this.onSelect(index, value)}>
<RadioButton value={value.id} isSelected={false} index={index}>
{/*<Text>{i.title}</Text>*/}
</RadioButton>
</RadioGroup>
)
})
}
but when i click on any button, it returns _this3.onselect is not function and its this function
onSelect=(index,value)=>{
console.log(index,value)
}
how to solve this?
Change this part of the code
{this.state.Rooms.map(function (value,index) {
to:
{this.state.Rooms.map((value,index) => {
Refer to this thread to know the difference between arrow functions vs the usual function declaration