I don't know how to access the value of the input, I've searched all over https://mui.com/material-ui/react-text-field/ and haven't found an answer. Here is my TextField `
<TextField
id="outlined-search"
label="Поиск по названию"
variant="outlined"
onInput={console.log('Input FIRE')}
/>
onInput doesn't work yet.
I don’t remember what I tried, my ass is on fire.
Please check this event, it could be helpful
onInput={e => console.log('Input FIRE>>', e)}
you can try to check this one e.target.value or something different.
Related
I'm using material ui TextField in my react application. I need to know how to use error and helper text validation for my below code which carry email and password?. Please go through the code given below and provide me a suitable solution.
function LoginPage() {
const handleSubmit1 = (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
console.log({
email: data.get("email"),
password: data.get("password"),
remember: data.get("remember"),
});
};
return (
<Box
component="form"
onSubmit={handleSubmit1}
noValidate
autoComplete="off"
sx={{ mt: 1 }}
>
<FormControl sx={{ width: "60ch" }}>
<CssTextField
type="email"
id="email"
name="email"
label="Username or email"
variant="standard"
fullWidth
required
autoComplete="off"
/>
<CssTextField
name="password"
label="Password"
type="password"
id="password"
autoComplete="off"
variant="standard"
fullWidth
Validators
required
/>
</FormControl>
<Stack direction="row" spacing={2}>
<Button variant="contained" size="medium">
LOGIN
</Button>
</Stack>
</Box>
);
}
I am not quite sure what exact problem you want to solve, can you elaborate a little more in details please.
I suppose you want to validate the input in some way and show error messages according to the validation state or just simply send the login request to your authentication service. If my assumption is correct, you may want to make use of existing libraries, which will handle that for you - one of those is: mui-validate
It will handle client side validation before sending any request to a server.
Or do you actually want to display the result of an async server response?
After understanding your actual challenge better I am sure we can provide you with a good code example.
Try exploring this https://mui.com/material-ui/api/text-field/
here you have a list of all APIs MUI text-field supports if you are still not able to capture your scenario then try this https://mui.com/material-ui/react-text-field/ here you have demos of all possible text field scenarios with error ones as well, Try exploring the library documentation first as it will increase your knowledge and a better understanding of MUI package. I hope with this one you can manage your case by yourself.
I have problem using react-hook-form v7 + material-ui textfield. The defaultValue working if I set autoFocus or I manually change the textfield value. However if I just submit without mouse click on the filed that not autoFocus, the defaultValue disappeared during the form submit. Please check codesandbox link
Test 1: don't touch anything, click submit, you will see submit value only has title but missing name and desc
Test 2: mouse click or change value in name, you will see after submit the value of name is there
My question is how to make this default value always submit even though without mouse click or change the value of the textField?
Please help and thanks in advance
To use Material-ui with react-hook-form. It is better to wrap it with Controller to allow react-hook-form to link with the 3rd party library element.
https://react-hook-form.com/api/usecontroller/controller
Wrap Textfield with Controller
const { handleSubmit, control } = useForm();
...
<Controller
render={({ field }) => (
<TextField
autoFocus
margin="dense"
id="title"
label="Title"
type="text"
fullWidth
{...field}
/>
)}
control={control}
name="title"
defaultValue={data.title}
/>
...
After that, the default value will be able to work as expected.
Here is the codesandbox for demo.
I am having the next trouble, I have the next textinput
<TextInput
style={styles.inputs}
placeholder="Nombre"
placeholderTextColor={theme.SECONDARY_TEXT_COLOR}
underlineColorAndroid="transparent"
autoCorrect={false}
autoCompleteType="off"
autoCapitalize="characters"
onBlur={(() => setvName(values.fName), handleBlur('fName'))}
value={values.fName}
/>
as you can see i have 2 functions on onblur, the thing is that it works great when i dont have handleBlur('fName') on it, but i need both of them for my formik validation, how can i make it work?
Use like this to call multiple function.
onBlur={() => {
setvName(values.fName);
handleBlur('fName');
}}
The text in the AsyncTypeahead textbox need to make white on the backspace. I have tried different methods by applying CSS, some method change, but that is not suitable. Can you anyone please suggest how to achieve this. Thanks in advance.
Below I have added the code used:
<AsyncTypeahead
className=""
id="typeahead"
delay={800}
emptyLabel="please select"
ignoreDiacritics={true}
minLength={3}
onSearch={this.onSearch}
placeholder="Insert text to search"
promptText={this.searchtext}
searchText={this.searchtext}
renderMenuItemChildren={(selectedItem: State, props) => {
}}
/>
In default semantic-ui we can do this option: https://github.com/Semantic-Org/Semantic-UI/commit/b4ae26d24f75886c3d5f6fc4f00e176f09705a13
But, how to do it in semantic-ui-react? Google nothing say about it, please, I need help.
What I'm trying to achieve:
I'm using redux-form. In my form present semantic component <Form.Select multiple ....> and after success submit - call to redux-form method reset. All is fine, form is clear... but not dropdown/select field. Any ideas?
I solved the problem as follows:
Semantic-ui-react props value set to the current value of the field.
<Form.Select
name={input.name}
options={options}
label={label}
placeholder={placeholder}
search
multiple
selectOnBlur={selectOnBlur}
onFocus={::this.handleFocus}
onBlur={::this.handleBlur}
onChange={::this.handleChange}
defaultValue={defaultValue || []}
value={input.value}
loading={loading} />