score:-1
if you will use defaultvalue
props you need to convert your value to string
first.
example:
const defvalue = 123;
<input defaultvalue={defvalue.tostring()} />
it works it my end.
score:-1
you can use this, it works for me :
const demo = () => {
const [form] = form.useform();
react.useeffect(() => {
form.setfieldsvalue({
username: 'bamboo',
});
}, []);
return (
<form form={form}>
<form.item name="username" rules={[{ required: true }]}>
<input />
</form.item>
</form>
);
};
score:0
looking at your code, i assume you are not using ant design form.
since it is controlled field, you need to use value prop instead of defaultvalue prop. if you see empty field, your redux initial state for settings may be empty '' string..
set your settings initial value in redux to appropriate value.
score:1
i had this problem when creating data-grid, and couldn't see the defaultvalue for the first input. if you want to use uncontrolled input you can use your custom input which is controlled and set a callback function to get results like from uncontrolled input. in my case, i used onblur action to get changed value.
const cusomeinput = ({ defaultvalue, oninputblur }) => {
const [inputstate, setinputstate] = usestate("");
useeffect(() => {
setinputstate(defaultvalue);
}, [defaultvalue]);
return <input value={inputstate} onchange={(e) => setinputstate(e.target.value)} onblur={oninputblur} />;
};
score:1
you can either achieve you target by putting a ref to the form
const formref = react.useref(null)
useeffect(()=>{
formref?.current?.setfieldsvalue({
name: fieldstopopulate?.name,
email: fieldstopopulate?.email,
...
})
},[fieldstopopulate])
return(
<form onfinish={handlefinish ref={formref}>
<form.item name="name" rules={[...]}>
<input {...props} />
<form.item name="email" rules={[...]}>
<input {...props} />
</form.item>
...
</form>
)
score:3
the correct thing is that you use fields. your code should look like.
<form
name="form_name"
fields={[
{
name: ["fieldname"],
value: settingsredux.background_image,
},
]}
>
<form.item name="fieldname">
<input
onchange={(e) =>
dispatch({
type: background_image,
payload: e.target.value,
})
}
/>
</form.item>
</form>;
you can see more examples in the documentation https://ant.design/components/form/
score:7
you may set initialvalues at form component as object.
<form
...
initialvalues={{
["name"]: settingsredux.background_image
}}
>
...
<input
name="name"
onchange={e => dispatch({
type: background_image,
payload: e.target.value
})}
/>
checkout here:https://ant.design/components/form/
score:8
you may want to use value
prop instead of defaultvalue
. the default value is used when you want to set an initial value in an uncontrolled input. currently, you have made your component controlled so you may have to use value prop.
read more about this here: https://reactjs.org/docs/forms.html#controlled-components
Source: stackoverflow.com
Related Query
- defaultValue of Input not working correctly on ant design
- Ant design Form validation is not working and not updating input values when component is from a state that is passed from a function
- Ant design type script Input field validation not working
- Ant Design Input Component not updating value
- Ant design sort table code not working on the react typescript
- Ant Design Layout is not working as expected
- Ant Design components style not loading correctly
- React ant design form validation not working (on submit)
- Ant Design Sidebar Layout Example Not working as expected
- React Material Design Icon hover not working correctly
- A toggle(Switch) in every row of a Ant Design table is not working as excepted
- React Ant Design type input value not clear
- EditableProTable Edit is Not working in ant design pro
- value prop does not show data in Input in Ant Design
- React Ant Design table filtering not working
- react-hook-form's setValue method is not working if input is in material ui dialog
- input pattern='[a-zA-Z]' is not working in React application
- defaultValue change does not re-render input
- defaultValue or value not working on FormItem ANTD
- React Ant Design styles not loading
- React-hook-form's 'reset' is working properly, input fields are still not emptying after submit
- Ant Design error: "Form.create() getFieldDecorator is not a function"
- Very slow input elements in Ant Design Form
- Prev and Next button is not working correctly at the breakpoints
- 100% height not working for Drawer, Material Design React
- MUI's Autocomplete AS MULTIPLE input + react-hook-form + controlling default values not working (TypeError: Can't read property 'filter' of undefined)
- React-native - Firebase onAuthStateChanged not working correctly
- why splice not working correctly in react?
- Extending Material UI theme via Module Augmentation not working correctly
- CSS Modules + Ant design in ReactJs does not work
More Query from same tag
- Property 'limitTags' does not exist on type 'IntrinsicAttributes & AutocompleteProps
- Typecast variable to extract of nested data
- insert django tag in react gatbsy helmet
- Styled-JSX variables not working
- How to access props and state of react-select HOC
- How to migrate Redux to React hooks
- How to add one event listener for two or more events in react
- How to tell react-create-app build script to not minimize parts of file?
- How to change the part of string into JSX element?
- React Router : Dynamically url id
- React remove item from nested list
- Reactjs, Redux - redux-persist
- In javascript, is it possible to shorthand put all imports in an array for export?
- How do I deploy my react app to GitHub Pages in production mode?
- How to add Html File Folder to the tsconfig File for Dist Folder in production
- How to use onchange on 2 input fields in React
- Copy active browser's url to clipboard with ReactJS
- Access to fetch at *** from origin *** has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
- setState does not update inside intervalRef
- Div generated outside
- Custom react code snippets not working in vscode in javascriptreact.json file
- React Router: Invalid hook call. Hooks can only be called inside of the body of a function component
- Is it faster to use React.memo if the areEqualFunction performs complex/a large number of comparisons?
- How to access the div element with a key in React JS? (react-dnd)
- Call function on button press - react
- How to define React Navigation navigationOptions parameter in Typescript
- ReactJS Dynamically Replace Children
- Reactjs disable button onclick realtime
- How to send a file/image from React to node.js server
- Why is my list not rendering on the page using sort ()?