The default behaviour of the filters in the list view of react-admin is to filter the list and cause an API call (presumably submit the form) on every change to the filter inputs. I would like an API call only to happen when an input onBlurs or when an explicit 'Search' button is clicked.
I have been playing with the onChange, onBlur functions of the inputs and the Filter, preventDefault, setFilters ... Nothing has come close to working but I include some template code below.
Perhaps I'd like to be able to specify the redux-form touchOnChange and touchOnBlur props but don't see any way of doing that.
How can this be achieved?
import { Filter, TextInput } from react-admin;
import { Button } from '#material-ui/core';
const MyFilter = (props) => {
return ( <Filter {...props} onChange={()=>{}}>
<TextInput label="Search" source="q" alwaysOn onBlur={()=>{}}/>
<Button alwaysOn onClick={(event)=>(props && props.setFilters(props.filterValues))}>SEARCH</Button>
<TextInput source="name"/>
</Filter> )
}
Related
I am using Native Base Popover.
scenario
As a user,
I can press on the list,
So that I can select a fruit
My problem is I don't understand how to close the <Popover /> from the outside of the component.
Here is my organization
<Formik>
<Popover>
<FlatList>
<Pressable onPress={() => handlePress(item.id)} /> //Banaba
<Pressable onPress={() => handlePress(item.id)} /> //Potato
<Pressable onPress={() => handlePress(item.id)} /> //Ananas
NativeBase offers a useDisclose() hook for handling opening/closing of modals and other popup windows.
That hook provides an isOpen state (as #mainak's answer mentions) as well as onOpen() and onClose() functions to manipulate that state. You can pass these helpers as arguments as-needed into the props of the same name within the Popover component to handle open/close state.
Optionally, you can in addition pass true or false into useDisclose() to override the starting value of isOpen (defaults to false).
Here is an example below for reference.
import React from "react";
import { Popover, useDisclose } from "native-base";
function MyComponent() {
const { isOpen, onClose, onOpen } = useDisclose()
return (
<>
<Button onPress={onOpen}>Open the Popover</Button>
<Popover isOpen={isOpen} onClose={onClose}>
<Popover.Content>
<Popover.Arrow />
<Popover.CloseButton />
<Popover.Header>My Popover Title</Popover.Header>
<Popover.Body>You can place the content of your popover inside the body.</Popover.Body>
<Popover.Footer>
<Button onPress={onClose} variant="ghost">Cancel</Button>
</Popover.Footer>
</Popover.Content>
</Popover>
</>
)
}
can you try isOpen prop in Popover tag and have it as a state value like
const [isOpen, setOpen] = React.useState(true);
...
<Formik>
<Popover isOpen={isOpen}>
<FlatList>
...
I'm passing a render to the Accordion element in native-base using the renderContent prop. The render contains two buttons, which, when pressed, run functions that are local to the current component. Unfortunately those functions are not available once it has been actually rendered.
How do I bind the functions properly so that when pressed, the correct functions are referenced?
I'm using the most modern stable releases of react-native, native-base, and I'm running this through expo for testing.
Here's the documentation on native-base:
http://docs.nativebase.io/Components.html#accordion-custom-header-content-headref
Accordion:
<Accordion
dataArray={ this.state.websites }
renderContent={ this._renderAccordionContent }
/>
renderContent:
_renderAccordionContent(content) {
return (
<Button
onPress={() => this.openSite(content.path)}
>
<Text>Open</Text>
</Button>
<Button
onPress={() => this.editSite(content.key)}
>
<Text>Edit</Text>
</Button>
)
}
When the buttons are pressed, the expected results are that the functions are run.
The actual results are that when the buttons are pressed, these errors are populated:
_this2.openSite is not a function.
_this2.editSite is not a function.
Thank you for any help.
Check out this excellent article that shows several different ways of binding your functions https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56
Here is an example of binding it in the constructor of your component that uses the Accordion component. It is by no means the only way of binding the functions. The above article gives 5 different ways of doing it.
class MyComponent extends Component {
constructor(props) {
super(props);
this.openSite = this.openSite.bind(this);
this.editSite = this.editSite.bind(this);
}
// I am assuming you have written your functions like this and not as arrow functions
openSite (path) {
...
}
editSite (key) {
...
}
_renderAccordionContent(content) {
return (
<Button
onPress={() => this.openSite(content.path)}
>
<Text>Open</Text>
</Button>
<Button
onPress={() => this.editSite(content.key)}
>
<Text>Edit</Text>
</Button>
)
}
render() {
...
<Accordion
dataArray={ this.state.websites }
renderContent={ this._renderAccordionContent }
/>
...
}
}
When I define a button in React Native as:
<Button ref="buttonRef" title="Button" onPress={this.buttonPressed}/>
And its onPress function as:
buttonPressed(){
this.refs.buttonRef.setNativeProps({color:"#ffffff"});
}
I get the following error:
this.refs.buttonRef.setNativeProps is not a function. (In
'this.refs.buttonRef.setNativeProps({
color: "#ffffff"
})', 'this.refs.buttonRef.setNativeProps' is undefined)
However, if I were to define any other type of component, e.g. text input as
<TextInput ref="userInputRef" value={"this is text"} />
With the function changing its props:
buttonPressed(){
this.refs.textRef.setNativeProps({color:"#ffffff"});
}
Everything changes correctly.
Is there a reason that the button component is unable to have its native props set through setNativeProps?
Button component is a simple custom component created from Touchable components and it doesn't have a ref property. You can check the source code of Button component here.
If you need to change properties of a component you should use state values for that.
Sample
buttonPressed = () => {
this.setState({color:"#ffffff"});
}
//....
<Button ref="buttonRef" color={this.state.color} title="Button" onPress={this.buttonPressed}/>
I know this question is already asked but i didn't find any proper solution. So here is my question, i want to pass TextInput value to another screen on submit button.So, please tell me How to pass the value and display on another screen. I am new in react native development.
At the top of your component you want to declare your state.
class App extends Component {
state = {text: ""};
Then you want to save whatever text is in your TextInput to that state.
<TextInput onChangeText={text => this.setState({text})} />
Then you would want to pass that state to the other component you would need it in.
Add this to the onPress of your submit button:
onPress={() => navigate('OtherComponent', { text: this.state.text} )}
Then in your "OtherComponent" you can access the state like this:
this.props.navigation.state.params.text
This is assuming that you are using react-navigation.
At the top of your component you want to declare your state.
class App extends Component {
state = {text: ""};
Then you want to save whatever text is in your TextInput to that state.
this.setState({text})} />
Then you would want to pass that state to the other component you would need it in.
Add this to the onPress of your submit button:
onPress={() => this.props.navigation.navigate('OtherComponent', { text: this.state.text} );
Then in your "OtherComponent" you can access the state like this:
this.props.navigation.state.params.text
This is assuming that you are using react-navigation.
I'm not sure when to use onChange vs onChangeText in a TextInput component. I know onChangeText accepts the changed text as an arg in the callback, but is that why you would use onChangeText, since you can then update state within the callback?
UPDATE 26.08.2019
Since the initial version of the answer, TextInput's API has changed, and answer below is no longer valid. I haven't worked with react-native for more than 2 years now, so I can't really tell which version had these changes.
Regarding the answer, onChangeText is still a simple prop, that gives whatever is the value of the input field on every change.
onChange on the other hand, passes an event with { nativeEvent: { eventCount, target, text} } (as mentioned in the comment to this answer). Now, I cannot tell with confidence, why do you need eventCount and target. I can only state, that eventCount is increased every time you interact with TextInput component (character added, removed, all deleted, value pasted) and target is a unique integer for that TextInput field. And text is the same value as in onChangeText
So basically, I would suggest to use onChangeText, as a more straight forward prop.
If you want to accomplish functionality like in the old answer(below), you can create custom component, that wraps TextInput and receives custom properties and passes them to the onChange prop later. Example below:
const MyTextInput = ({ value, name, type, onChange }) => {
return (
<TextInput
value={value}
onChangeText={text => onChange({ name, type, text })}
/>
);
};
And then use it whenever you need to use TextInput
handleChange(event) {
const {name, type, text} = event;
let processedData = text;
if(type==='text') {
processedData = value.toUpperCase();
} else if (type==='number') {
processedData = value * 2;
}
this.setState({[name]: processedData})
}
<MyTextInput name="username" type="text" value={this.state.username} onChange={this.handleChange}}>
<MyTextInput name="password" type="number" value={this.state.password} onChange={this.handleChange}}>
OLD ANSWER
onChangeText is basically a simplified version of onChange, so you can easily use it, without the hassle of going through event.target.value to get changed value.
So, when should you use onChange and when onChangeText?
If you have simple form with few textinputs, or simple logic, you can go straight away and use onChangeText
<TextInput value={this.state.name} onChangeText={(text) => this.setState({name: text})}>
If you have more complicated forms and/or you have more logic in handling data (like handling text differently from number) when user changes input, then you are better of with onChange, because it gives you more flexibility. For example:
handleChange(event) {
const {name, type, value} = event.nativeEvent;
let processedData = value;
if(type==='text') {
processedData = value.toUpperCase();
} else if (type==='number') {
processedData = value * 2;
}
this.setState({[name]: processedData})
}
<TextInput name="username" type="text" value={this.state.username} onChange={this.handleChange}}>
<TextInput name="password" type="number" value={this.state.password} onChange={this.handleChange}}>
Use it like this:
<Input label='First Name' onChange={this.onChange} value={this.state.first}/>
onChange = (event) => {
const {eventCount, target, text} = event.nativeEvent;
this.setState({first:text});
};
The target attribute seems useless. It doesn't look like you can attach data attributes to react-native elements and retrieve them from the target element like you can in react because the app is not a browser.
With react, we're told it's better practice to not attach inline functions to the onChange event for performance reasons. We're supposed to use custom props or data-* attributes on the HTML element and retrieve the information from e.target inside the onChange handler.
But with react-native it seems this format of passing data is actually acceptable:
<Input
label='First Name'
onChangeText={text=>this.onChange('first',text,'anotherValueIWantToPass')}
value={this.state.first}/>
onChangeText gives you just the string as the argument for the callback.
onChange gives you the synthetic event as the argument.