sorry to ask this simple question but I'm new to React and I am trying to use the keyboard library from hodgef/react-simple-keyboard, along with Ant Design to try creating a login page. I pretty much followed the code sample from this Codesandbox Example and things works fine, until I replaced the default input tag into Ant-Design's Input component.
From this:
<input
id="firstName"
value={getInputValue("firstName")}
onFocus={() => setInputName("firstName")}
placeholder={"First Name"}
onChange={onChangeInput}
/>
Into this
<Form.Item
label={<text style={{ color: 'white' }}>Username</text>}
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
style={{ color: 'white' }}
>
<Input
id="inputUserName"
value={getInputValue('inputUserName')}
onFocus={() => setInputName('inputUserName')}
placeholder="User Name"
onChange={onChangeInput}
/>
</Form.Item>
After using Ant Design's Components, the input will not update anymore when I press the keyboard buttons.
Anyone in this community know what is the problem causing this? Is it because the <Input> is nested inside <Form.Item> , which made the ref not working anymore?
So if I were to use only input, without nested inside Form.Item it will still works:
<Input
id="inputUserName"
value={getInputValue('inputUserName')}
onFocus={() => setInputName('inputUserName')}
placeholder="User Name"
onChange={onChangeInput}
/>
Much appreciated if anyone could answer this stupid question, I'm really new and I don't even know what to search for to begin with, and really sorry for my poor English, I don't know how to explain or elaborate further.
Fixed by following this code sample from ANTD.
Basically I added following lines to call the form method.
const [form] = Form.useForm();
Then assigning the input values in the onChangeAll listener in the keyboard component as follows:
const onChangeAll = (inputs) => {
setInputs({ ...inputs });
form.setFieldsValue({
username: `${inputs.inputUserName}`,
password: `${inputs.inputPassword}`,
});
};
Also don't forgot to add this line in the Form component
<Form
form={form}
...
>
Related
A bit of an odd request, but I'm looking for a way to have an input field be completely un-interactable with.
I have a component with an input field that the user should interact with. In another page of my app, I want to reuse the visual of that component, but they should not be able to interact with it.
I have tried:
<input
type="text"
placeholder="[Click here to enter scramble you want to solve]"
onClick={(e) => e.preventDefault()}
/>
But it did not work.
Add a prop for disable the input based on parent component where you want to use
<input
type="text"
placeholder="[Click here to enter scramble you want to solve]"
onClick={(e) => e.preventDefault()}
disabled={props.disabled}
/>
Try readonly inside input field, it might work for you
<input readonly type="text">
Following the tutorial - https://www.react-hook-form.com/advanced-usage#SmartFormComponent) - works until the inputs are wrapped in an element. What changes would one need to make to the Form component to make this work?
<Form onSubmit={(data) => setData(data)}>
{/* wrapping the inputs breaks the form */}
<div>
<Input name="firstName" />
<Input name="lastName" />
</div>
<button>Submit</button>
</Form>
A hacky way out of this problem would be to create something like:
const InputWithDiv = props => (
<div>
<Input {...props} />
</div>
)
ref: https://stackoverflow.com/a/66215997/2102042
but this isn't a solution
👀 👉 example: https://codesandbox.io/s/react-hook-form-smart-form-component-forked-8o0f9?file=/src/index.js
I think you have to use FormContext here. There is also this discussion answered by the author of the library which recommends using FormContext for a scenario where your inputs are deeply nested. For example when using a <fieldset /> or a fragment or as in your case a <div />.
Here is the relevant section from the docs.
I am using react-select for better look on UI, and I have implemented it, Now what I am trying to do is
I want to validate that input field when user clicks on Done button (form submit)
I am using react-hook-form for validation
They provide ref={register} which holds the input field value
so for normal input field or select I am able to use this like below
<label htmlFor="fname">
First Name
</label>
<input
type="text"
name="fname"
id="fnameid"
className="form-control"
ref={register({
required: 'First name is required',
})}
/>
{errors.fname && (
<div>
<span className="text-danger">
{errors.fname.message}
</span>
</div>
)}
Now the above is working fine but in case of react-select I do not know how to go forward
<Select
value={initailSelect}
onChange={(e) => onChangeAge(e)}
options={data}
/>
So here when I click on submit button it is only taking validation for fname and giving output on console for fname only
I tried doing like below
<Select
value={initailSelect}
onChange={(e) => onChangeAge(e)}
options={data}
ref={register({
required: 'age is required is required',
})}
/>
Code sandbox Here is my code sandbox My working code, Please check
Edit
I Tried This approach but it is not taking up defaultValue or Value, as I want to show one value selected, a nd in some cases I am getting values from server Which I want to show as selected.
Here is the link for codesandbox, you can either wrap the component in the Controller or use setValue to manually set values and validate
https://codesandbox.io/s/bitter-wave-w1cpi?file=/src/App.js:2084-2802
https://w1cpi.csb.app/
reference
https://react-hook-form.com/get-started#IntegratingwithUIlibraries
If I pass allowClear={true} to an AntD Input component, a small circle with an × appears at the end of the field once a user has typed something, which can be clicked to empty the contents of the field.
Is there some way to instruct AntD to use a different icon?
The AntD docs for reference: Input with Clear Icon
For current version 3.19.8 you can't.
The closest clean solution will be using Input.Group with revealing clear button on typing.
<Input.Group compact>
<Input
style={{ width: "80%" }}
onChange={e => setValue(e.target.value)}
value={value}
/>
{value && <Button onClick={reset} type="danger" icon="delete" />}
</Input.Group>;
Note: Should add animation on button reveal.
Yes, you can by passing prop to allowClear:
<Input
allowClear={{ clearIcon: <CloseOutlined /> }}
/>
In my stepper code Iam trying to include the radio button.
When I include the radio button I am getting the below error.
I looked into this example https://redux-form.com/6.0.0-alpha.6/examples/simple/ and then imeplemented
but still I am faccing errors.
Can you tell me how to fix it, so that in future I will fix it myself.
Providing my sandbox and code snippet below.
https://codesandbox.io/s/0prxxxvy0n
Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: undefined. You
likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports.
const AsyncValidationForm = props => {
console.log("AsyncValidationForm ---->");
const { handleSubmit, pristine, reset, submitting } = props;
return (
<form onSubmit={handleSubmit}>
<Field
name="username"
type="text"
component={renderField}
label="Username"
/>
<Field
name="password"
type="password"
component={renderField}
label="Password"
/>
<Field name="sex" type="radio" value="male" />
<div>
<button type="submit" disabled={submitting}>
Sign Up
</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>
Clear Values
</button>
</div>
</form>
);
};
You simply need to add the renderField component to your radio field:
<Field component={renderField} name="sex" type="radio" value="male" />
Why does it solve your issue?
What you are using here, is the Field component of redux-form. (See your import import { Field, reduxForm } from "redux-form";)
When you don't know how a component that you are integrating is working, there is always hope for a good documentation. In case of redux-form we are lucky: there actually is one that as well describes their Field component.
What we can get there is the following:
The name prop is required. It is a string path, in dot-and-bracket notation, corresponding to a value in the form values. It may be as simple as 'firstName' or as complicated as contact.billing.address[2].phones[1].areaCode.
The component prop is required. It may be a Component, a stateless function, or a factory, like those provided under React.DOM. See Usage section below. To learn about the props that will provided to whatever your component is, see the Props section below.
All other props will be passed along to the element generated by the component prop.
The second paragraph explains why your approach did not work out: the component prop is required. :)
Source: https://redux-form.com/6.0.0-alpha.6/docs/api/field.md/
Hope it helps.