I use
<ReferenceInput reference={'data-systems'} source={'masterSystemId'}>
<AutocompleteInput optionText={"key"} optionValue={"id"}/>
</ReferenceInput>
And I expect that react-admin send query like localhost/data-systems?filter={key: <VALUE_FROM_INPUT>}
BUT! really query is filter={q: <VALUE_FROM_INPUT>} that doesn't work :(
Is there a way to send right fieldname?
its need to add filterToQuery={searchText => ({ key: [searchText]}) to ReferenceInput
Related
I'm using ReferenceArrayInput React Admin.
However, there is issue for me when I selected item from suggestion items that is returned from API getList(). ex:/product?region_id="VN".
Then React Admin auto call API GetMany() with list id, ex: /products?id=1 to get detail item info.
How can customize filter for above API, such as: /products?id=1®ion_id="VN" instead
because some product info such as: price, qty,... base on region.
<ReferenceArrayInput
label="Products"
source="product_ids"
reference="products"
allowEmpty={false}
filter={{region_id: record?.region_id}}
fullWidth
filterToQuery={searchText => ({
q: searchText,
})}
>
<AutocompleteArrayInput optionText={optionProductRenderer} validate={required()}/>
</ReferenceArrayInput>
I have a react-native list populated from firebase. I want to add a search bar on top of the app. Once I start typing, I want that list to only show results related to the search term. Its similar to this: https://www.freecodecamp.org/news/how-to-build-a-react-native-flatlist-with-realtime-searching-ability-81ad100f6699/
Only problem is the way my data is typed after its retrieved from firebase, its impossible to use the tutorial above to retrieve that data.
My html code is:
<Toolbar title="Hello World"/>
<Button
title="Add New"
type = "outline"
onPress={this.addItem.bind(this)}
/>
<ListView
dataSource={this.state.itemDataSource}
renderRow={this.renderRow}
/>
My Firebase retrieval code is as follows:
getItems(itemsRef) {
itemsRef.on('value', (snap) => {
let items = [];
snap.forEach((child) => {
items.push({
title: child.val().DESCRIPTION,
text: child.val().BASE,
_key: child.key
});
});
this.setState({
itemDataSource: this.state.itemDataSource.cloneWithRows(items)
});
});
}
I just don't know how to add a search bar that searches the retrieved list and displays only relevant stuff on the list as someone types a word in.
Pease help. I'm guessing the type of the data is what is causing the problem.
Results should look like this App. I built this on AppSheet:
https://www.appsheet.com/start/ab7f8d5d-1adf-4107-bdd8-f7022a1a81f8
I have a field where I only want the length to be 3 numbers long max. I am using Yup, however, it only notifies the user of the error, it doesn't stop the user from entering a number longer than desired.
To fix this I created a function that slices the input value. This looks like it works, it keeps the length in the form field to what I want, however, when I click submit the value for the field is the unsliced version.
Here is my code...
<TextInput
style={styles.text}
value={_checkLength(values.number, 3)}
onChangeText={handleChange('number')}
onBlur={() => setFieldTouched('number')}
placeholder="Number"
/>
My _checkLength function is simple...
_checkLength = (value, length) => {
return value.slice(0, length)
}
Why is this not working?
Leaving this answer so people can see how to use setFieldValue, but #Carlos had the correct and obvious answer. That is to simply use maxLength={num}
Credit to #MohammedAshfaq . His answer is correct but I wanted to provide exact code that needs to be updated. The answer was to run setFieldValue by putting it in the onChangeText field. I had to pass in the value and then run my function using that passed in value. Now, when I submit it submits the proper value returned from the _checkLength function.
<TextInput
style={styles.text}
value={values.number}
onChangeText={(value) => setFieldValue('number', _checkLength(value, 3))}
onBlur={() => setFieldTouched('number')}
placeholder="Uniform Number"
/>
<Text>aircraft</Text>
I need to get aircraft in Text, and change the value of Text dynamically. How could I do?
You can access it like this (example: https://rnplay.org/apps/ACHJEQ)
<Text ref={(elem) => this.textElem = elem}>Hello world!</Text>
and then:
console.log('textElem content', this.textElem.props.children);
But you can't set it since it's a (read-only) prop.
Well... various ways to do this.
For example:
<Text>{this.state.aircraftText}</Text>
and then just change the state variable. You could also implement it sth like:
<Text>{ (this.state.checkIfTrue) ? 'Boeing787' : 'Airbus 320' } </Text>
this checks if this.state.checkIfTrue results to true and displays either 'Boeing787' or 'Airbus 320'.
This should give you a first idea.
I simply want to call a function with the text of a TextInput once editing of the text is done. Something like below
<TextInput onSubmitEnding={(text) => submitText(text)}>
But obviously the text is not passed as argument to onSubmitEnding, . onChangeText has it. But I really want the text after the user is done editing. So whats the simplest means to do this,
1º onSubmitEnding is not a valid event, the correct one is onSubmitEditing.
2º You can get the input value using event.nativeEvent.text
Your code should look like this
<TextInput onSubmitEnding={(event) => this.submitText(event.nativeEvent.text)}>
I'm not forcing you to certain pattern, but you should have your TextInput's value in a state. Then:
...
this.state = {
textInputValue: ''
}
...
submitText() {
console.log(this.state.textInputValue)
}
...
<TextInput
value={this.state.textInputValue}
onChangeText={(text) => this.setState({textInputValue: text})}
onSubmitEditing={() => this.submitText()} />
is completely valid. Here's a live example: https://rnplay.org/apps/wirurQ