When I try using react-admin components on my Dashboard component with this code (I assume these are the only relevant lines):
import { ReferenceInput, AutocompleteInput } from "react-admin";
<ReferenceInput source="id" reference="buildings">
<AutocompleteInput source="ProjectName" />
</ReferenceInput>
I get the following error:
"Error: Field must be inside a component decorated with reduxForm()"
I'd really like to use AutocompleteInput on my dashboard - is this possible? I'm assuming I'd have to connect Dashboard to react-admin's redux store(s) and possibly do some other magic to achieve this.
All react-admin components are connected to redux-form, so the error might come from the dashboard not being a redux-form. Have you tried using it inside a redux-form Field component?
import { ReferenceInput, AutocompleteInput } from "react-admin";
import { Field } from 'redux-form';
<Field
{...this.props}
component={ReferenceInput}
source="id"
reference="buildings"
>
<AutocompleteInput source="ProjectName" />
</Field>
Related
I'm using Awesome Alert for customize alert but I would like to apply it in functional component environment. This is my design
And this is my code
<AwesomeAlert
show={true}
showProgress={false}
title="AwesomeAlert"
message="I have a message for you!"
closeOnTouchOutside={false}
closeOnHardwareBackPress={false}
showCancelButton={true}
showConfirmButton={true}
cancelText="Reject"
confirmText="Approve"
confirmButtonColor="#AEDEF4"
cancelButtonColor="#DD6B55"
onCancelPressed={() => {
console.log("Reject")
}}
onConfirmPressed={() => {
console.log("Approve")
}}
/>
My question is, is Awesome Alert can only be applied in Class component? How am I able to implement it in Functional Component like the original Alert React Native?
You can use AwesomeAlert inside a functional component as you would inside a class component's render() function; any React component that can be rendered from a class component can also be rendered from a functional component.
Just put it inside your return part of your functional component and it will work
For Example like this:
return (
<View>
<AwesomeAlert
show={true}
showProgress={false}
title="AwesomeAlert"
message="I have a message for you!"
closeOnTouchOutside={false}
closeOnHardwareBackPress={false}
showCancelButton={true}
showConfirmButton={true}
cancelText="Reject"
confirmText="Approve"
confirmButtonColor="#AEDEF4"
cancelButtonColor="#DD6B55"
onCancelPressed={() => {
console.log("Reject")
}}
onConfirmPressed={() => {
console.log("Approve")
}}
/>
</View>
)
I'm creating a mobile app with React Native and I need to use a form. I want to use react-hook-form, but I can't get it to work, even in a newly created project. I did the following:
Created new React Native projects: it runs as it should
npm install react-hook-form
copy-paste following code to App.js:
import React from "react";
import { useForm } from "react-hook-form";
export default function App() {
const { register, handleSubmit, watch, formState: { errors } } = useForm();
const onSubmit = data => console.log(data);
console.log(watch("example")); // watch input value by passing the name of it
return (
/* "handleSubmit" will validate your inputs before invoking "onSubmit" */
<form onSubmit={handleSubmit(onSubmit)}>
{/* register your input into the hook by invoking the "register" function */}
<input defaultValue="test" {...register("example")} />
{/* include validation with required or other standard HTML validation rules */}
<input {...register("exampleRequired", { required: true })} />
{/* errors will return when field validation fails */}
{errors.exampleRequired && <span>This field is required</span>}
<input type="submit" />
</form>
);
}
It gives following error: screenshot of emulator
I have no idea what's the problem. Is there something wrong with the installation of react-hook-form as it doesn't recognize the input field?
Thanks!
when i custom my Create page using ,the can not display correctly. how to fix it?
you can see the following reproduce in code-sandbox.
Visit here
enter the tags list
click the create button, enter to the Create page.
see the input of post.
<Create title=" " {...props}>
<SimpleForm toolbar={<TagCreateToolbar onCancel={onCancel}
/>}>
<TextInput source="name" validate={required()} />
<ReferenceInput label="Post" source="post_id" reference="posts">
<AutocompleteInput optionText="title" />
</ReferenceInput>
</SimpleForm>
</Create>
You need to fix the file: src/tags/index.js as follows:
import TagList from './TagList';
import TagCreate from './TagCreate';
import TagEdit from './TagEdit';
export default {
list: TagList,
create: TagCreate,
edit: TagEdit
};
It's still worth updating react-admin before the last release of 2.9.6
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> )
}
I am using Native base library in React Native.
In native base, there is component called Button and also there Component Button from 'react-native'.
If i want to use both Button components simultaneously, what should I do?
You can use alias
import { Button } from 'react-native'
import { Button as ButtonBase } from 'native-base';
and
<Button /> {# React Native Button #}
<ButtonBase /> {# Native Base Button #}
You can simply use use ALIAS by adding word as between the default name and the new name you want example:
import {View as V} form react-native;
and in your render() function you can call it like the
<V>...</V>
so for your question you can do this you can do this
import {Button as ButtonMain} from react-native;
import {Button as ButtonRB} from react-native;
and you can call them in your render() function like this:
<ButtonMain />
<ButtonRB />