Today, I started to use react-hook-form and the isDirty variable seems quite weird for me.
It is always true although only the focus was given to any input elements.
I expect isDirty should be true only when value of input element changes. Is that normal in react-hook-form?
// I had to make workaround like this. but I am not sure if this is normal for everybody.
const closeForm = () => {
const { dirtyFields } = form.formState
const isReallyDirty = Object.keys(dirtyFields).length > 0
if (isReallyDirty) {
if (window.confirm("Discard the changes?")) {
dispatch(closeItem())
}
} else {
dispatch(closeItem())
}
}
UPDATE: I think this is a bug of react-hook-form?
react-hook-form version 6.11.0
This happens only when React.forwardRef was used.
const TextareaBox = ({ ref, ...props }) => {
const { errors, name } = props
const { required, ...restProps } = props
return (
<Row>
<Label {...props} columnSize={2} />
<Col lg={10}>
<textarea id={name} {...restProps} maxLength="200" rows="3" ref={ref} />
<ErrorMessage className="errorMessage" errors={errors} name={name} as="p" />
</Col>
</Row>
)
}
const TextareaBox = React.forwardRef((props, ref) => {
const { errors, name } = props
const { required, ...restProps } = props
return (
<Row>
<Label {...props} columnSize={2} />
<Col lg={10}>
<textarea id={name} {...restProps} maxLength="200" rows="3" ref={ref} />
<ErrorMessage className="errorMessage" errors={errors} name={name} as="p" />
</Col>
</Row>
)
})
I had a similar issue and I ended up solving it by checking length of dirtyFields property of the formState.
In react hook form, you may feel that isDirty behaves more like it is isTouched. But you have to pass the defaultValue to the input field because RHF needs a value to compare against as mentioned in the official documents.
Let me know if that makes sense.
Related
{
this.state.editMode
?
<Card.Body>
<Form>
<Form.Group>
<Form.Control id="des" as="textarea" rows={3} placeholder="Description"
value={this.state.description}
onChange={(des) => {
this.setState({description: des.target.value})
}}/>
</Form.Group>
<Form.Group>
<Form.Control id="link" type="text" placeholder="Link (Optional)"
value={this.state.link}
onChange={(link) => {
this.setState({link: link.target.value})
}}/>
</Form.Group>
</Form>
</Card.Body>
:
<Card.Body>
<p className="cardBody alignLeft">{this.state.description}</p>
<a href={"https://" + this.state.link}
target="#">{this.state.link}</a>
</Card.Body>
}
I want to make two sub component here. One for if editmode is true and another if editmode is false.
But problem is that, this subcomponent also need to use the state variable of parent class. And also, if i change something on sub component, parent components state need to be changed. How can I do that?
You need to pass the state of the parent as props for the child component, which is a standard practice as mentioned here - https://reactjs.org/docs/lifting-state-up.html
If you want to change the state of the parent within the child, you can also pass a function as a prop to the child. The call to the function in child component will trigger state change in parent.
https://dev.to/vadims4/passing-down-functions-in-react-4618
A better way for large component trees is through use of dispatch via React context. This is explained in
https://reactjs.org/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down
As others suggested, you can pass state as props and setState as a prop as well to update parent from child.
Here is an example that might help you understand how to split components and passing values and setState using props.
Note: I have used React Hooks, you can modify it based on class based components.
import React, { useState } from "react";
const App = () => {
const [editMode, setEditMode] = useState(false);
const [data, setData] = useState({
description: "",
link: ""
});
const editModeHandler = (key, value) =>
{
setData((prevState) =>
{
return {...prevState, [key]: value}
})
//setEditMode(true)
};
return <div className="App">{editMode
? <GroupOne value = {description} change = {editModeHandler}/>
: <GroupTwo value = {link}/>}</div>;
};
export default App;
/*Edit Mode True*/
const GroupOne = (props) => {
const { value, change } = props;
return (
<Card.Body>
<Form>
<Form.Group>
<Form.Control
id="des"
as="textarea"
rows={3}
placeholder="Description"
value={value}
onChange={(des) => change("description",des.target.value)}
/>
</Form.Group>
<Form.Group>
<Form.Control
id="link"
type="text"
placeholder="Link (Optional)"
value={value}
onChange={(des) => change("link",des.target.value)}
/>
</Form.Group>
</Form>
</Card.Body>
);
};
/*Edit Mode False*/
const GroupTwo = (props) => {
const { value } = props;
return (
<Card.Body>
<p className="cardBody alignLeft">{value}</p>
<a href={"https://" + value} target="#">
{value}
</a>
</Card.Body>
);
};
You should create a second component and pass the state variables as to the second components. For more information read this documentation https://reactjs.org/docs/components-and-props.html
I am working on React JS. I have one text-box component and I want to show some default value in it. After that, the user should be allowed to change the value. Now I am unable to change the value. The text box is behaving like read-only. Below is my code
const EditStyleFormComponent = ({
submitting,
invalid,
}) => (
<form className={className} onSubmit={handleSubmit}>
<h2>LSPL (Low Stock Presentation Level)</h2>
<Line />
<InputGroup>
<TextFieldWithValidation name="lsplMan" label="LSPL Manual" input={{ onChnage:'', value: 'Current' }} />
</InputGroup>
</form>
);
Below is my TextFieldWithValidation code.
export const TextFieldWithValidationComponent = ({
meta,
input,
noStyles,
...otherProps
}) => (
<TextField
state={noStyles ? textFieldStates.DEFAULT : getState(meta)}
errorMessage={meta.touched ? meta.error : null}
{...input}
{...otherProps}
/>
);
Below is my TextField code.
const TextField = ({
className,
label,
description,
state,
errorMessage,
isEditable,
spaceAtBottom, // Not used, but we don't want it in otherProps
...otherProps
}) => {
const inputId = _.uniqueId();
return (
<div className={className}>
{label &&
<label htmlFor={inputId}>{label}</label>
}
<div className="input-group" id={isEditable ? 'editable' : 'readonly'}>
<input
id={inputId}
readOnly={!isEditable}
{...otherProps}
/>
{getStatusIcon(state)}
{errorMessage &&
<Error>{errorMessage}</Error>
}
{description &&
<Description>{description}</Description>
}
</div>
</div>
);
};
Can someone help me to fix this issue? Any help would be appreciated. Thanks
You can use State Hook for manage state in functional component.
Example :
const Message = () => {
const [message, setMessage] = useState( '' );
return (
<div>
<input
type="text"
value={message}
placeholder="Enter a message"
onChange={e => setMessage(e.target.value)}
/>
<p>
<strong>{message}</strong>
</p>
</div>
);
};
Yu defined onChange as empty string in EditStyleFormComponent component. So on any change input component just do nothing.
onChange should be some function that will update value.
If you want to use functional components there are two possible solutions:
Lift state up to parent component of EditStyleFormComponent (in case parent is class based component)
Use React Hooks like so (just example!)
const EditStyleFormComponent = ({
submitting,
invalid,
}) => {
const [inputValue, setInputValue] = useState ('Current'); // default value goes here
return <form className={className} onSubmit={handleSubmit}>
<h2>LSPL (Low Stock Presentation Level)</h2>
<Line />
<InputGroup>
<TextFieldWithValidation name="lsplMan" label="LSPL Manual" input={{ onChnage: (e) => { setInputValue(e.target.value); }, value: inputValue }} />
</InputGroup>
</form>
};
using final-form, i have a third party input component. i've written an adapter for it. it has a validator as well, but meta.touched is always false. i've tried propagating the onFocus event up to the input, but no luck. what am i doing wrong?
const requiredValidator = value => (value ? undefined : 'is required');
const FloatingLabelInputAdapter = ({ input, meta, ...rest }) => (
<FloatingLabelInput
{...rest}
onChange={(event) => input.onChange(event)}
onFocus={(event) => input.onFocus(event)}
errorText={meta.touched ? meta.error : ''}
/>
)
// used like this:
<Field
component={FloatingLabelInputAdapter}
label="Email"
name="email"
type="text"
validate={requiredValidator}
/>
// and here's the render() of the component
render() {
const { children, label } = this.props;
const { focussing, used } = this.state;
console.log('FloatingLabelInput.props', this.props);
return (
<Group {...this.props} >
<TextInput
focussing={focussing}
innerRef={(comp) => { this.input = comp }}
onFocus={this.onFocusHandle}
onBlur={this.onBlurHandle}
onChange={this.onChange}
type={this.props.type} />
<Label
focussing={focussing}
used={used}>
{label}
</Label>
<Bar focussing={focussing} />
</Group>
);
}
}
annnnd as usual i answer my own question.
i had to propagate the onBlur() event as well, which makes sense since touched docs say it's true only after user has entered and left focus on the input.
<FloatingLabelInput
...
onBlur={(event) => input.onBlur(event)}
/>
I am trying to integrate react-select using redux form...
Here is my code
import Select from 'react-select'
import StyledSelectField, { StyledMessages } from './style'
const SelectField = props => {
const { input, label, placeholder, options, meta, ...StyledProps } = props
const { onChange, onBlur, onFocus } = props.input
return (
<StyledSelectField {...StyledProps} meta={meta} hasValue={!!input.value}>
<label htmlFor={input.name}>{label}</label>
{placeholder && <div className="placeholder">{placeholder}</div>}
<Select
name={input.name}
value={input.value.value}
onChange={onChange}
onBlur={onBlur}
onFocus={onFocus}
options={options}
{...props}
/>
<StyledMessages>
{meta.touched &&
((meta.error && <span className="error">{meta.error}</span>) ||
(meta.warning && <span className="warning">{meta.warning}</span>))}
</StyledMessages>
</StyledSelectField>
)
}
class TestingCycleForm extends PureComponent {
render() {
const { preMonitoring, handleChange, handleSubmit } = this.props
return (<div>
<Field
label="18%"
name="patientPercentage"
className="form-control"
component={SelectField}
options={Config.get('/PATIENT_PERCENTAGE')}
/>
</div>)
}
}
All things are working but my input field gets cleared on focus out what I am doing wrong here?
Thanks in advance... Any help would be appreciated
You say “focus out” - does that mean it clears on blur? If so, does setting onBlurResetsInput and onCloseResetsInput to false help?
Update: here's the link to the props table from the github readme. You've got to set both onBlurResetsInput and onCloseResetsInput to false at the same time, onBlurResetsInput set to false, by itself, will do nothing.
And also you need to remove the onBlur prop from the select which causes field clear on Blur
<Select
name={input.name}
value={input.value.value}
onChange={onChange}
onBlurResetsInput={false}
onCloseResetsInput={false}
onFocus={onFocus}
options={options}
{...props}
/>
I'm trying to create a form that appears in modal. So when user input a value, that value is stored in local storage. Here's a picture that help's you to understand what I mean:
Here is the code of the form:
function FieldGroup({id, label, help, ...props}) {
return (
<ReactBootstrap.FormGroup controlId={id}>
<ReactBootstrap.ControlLabel>{label}</ReactBootstrap.ControlLabel>
<ReactBootstrap.FormControl {...props} />
{help && <ReactBootstrap.HelpBlock>{help}</ReactBootstrap.HelpBlock>}
</ReactBootstrap.FormGroup>
);
}
const formInstance = (
<form>
<FieldGroup
id="formControlsText"
type="text"
label="Text"
placeholder="Recipe Name"
inputRef={ref => { this.input = ref; }}
/>
<ReactBootstrap.FormGroup controlId="formControlsTextarea">
<ReactBootstrap.ControlLabel>Ingredients</ReactBootstrap.ControlLabel>
<ReactBootstrap.FormControl componentClass="textarea" placeholder="Enter Ingredients" />
</ReactBootstrap.FormGroup>
</form>
);
As I've read in bootstrap React tutorial, I should add
<FormControl inputRef={ref => { this.input = ref; }} /> to the FormControl props. But after adding it I get an error when modal form is invoked:
`
I just made this issue. My code:
<FormControl
componentClass="input"
placeholder="Enter recipe title"
inputRef={(ref) => {this.input = ref}}
defaultValue={title}/>
</FormGroup>
And then you can get the value from <FormControl> in some handler like this:
console.log(this.input.value);
Details can be found in my repo: https://github.com/kerf007/recipebook
I have same problem with you, and this is my solution
const FieldGroup = ({id, label, help, inputRef, ...props}) =>
<FormGroup controlId={id}>
<ControlLabel>{label}</ControlLabel>
<FormControl {...props} inputRef={inputRef}/>
{help && <HelpBlock>{help}</HelpBlock>}
</FormGroup>
and my form
<form>
<FieldGroup
id="bookName"
type="text"
label="Name"
placeholder="Enter name..."
inputRef = {(input) => this.inputName = input }
/>
<FieldGroup
id="bookAuthor"
label="Author"
type="text"
placeholder="author 's name..."
inputRef={(input) => this.inputAuthor = input}
/>
</form>
then you can get book 's name and author 's name value by:
this.inputName.value and this.inputAuthor.value
This issue (or more like a change in the way it works) is related to React-Bootstrap. The way you're doing it won't work anymore.
The <FormControl> component directly renders the or other specified component. If you need to access the value of an uncontrolled <FormControl>, attach a ref to it as you would with an uncontrolled input, then call ReactDOM.findDOMNode(ref) to get the DOM node. You can then interact with that node as you would with any other uncontrolled input.
Here's an example:
var React = require('react');
var ReactDOM = require('react-dom');
var FormControl = require('react-bootstrap').FormControl;
React.createClass({
render: function() {
return (<FormControl ref="formControl" />);
},
getFormControlNode: function() {
// Get the underlying <input> DOM element
return ReactDOM.findDOMNode(this.refs.formControl);
}
});
As soon as you get the DOM element, you will be able to retrieve the value: this.getFormControlNode().value or do anything else that you want.
PS: Here's a related github issue on this topic.
This worked for me, using https://reactjs.org/docs/refs-and-the-dom.html
constructor(props) {
super(props);
this.email = React.createRef();
}
submit() {
var email = this.email.current.value;
console.log(email);
}
render() {
return (
<Form>
<Form.Control type="email" placeholder="Your email" ref={this.email} />
<Button variant="primary" onClick={()=>this.submit()}>Send</Button>
</Form>
);
}
I think what it suggests to use is the ref callback attribute, so just change inputRef to ref.
FYI: https://facebook.github.io/react/docs/refs-and-the-dom.html
Hello this solution worked for me!
<Form
noValidate
validated={validated}
onSubmit={(e) => this.handleSubmit(e)}
style={{ width: '100%' }}
>
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" inputRef={(ref) => { this.email = ref }} required />
<Form.Text className="text-muted"> Well never share your email with anyone else.
</Form.Text>
</Form.Group>
</Form>
handleSubmit(event) {
console.log(event.target.elements.formBasicPassword.value)
}
I think I found how to get the ref from React-Bootstrap <Form/>.
import React, {createRef} from 'react'
interface definedProps {}
interface definedState {
myRef: Object //I didn't found the more accurate type
}
export default class SomeClass extends React.Component<definedProps,definedState> {
state = {
myRef: React.createRef<Form<any>>() //That's it!
}
const handleClose = () => {
console.log('this.state.myRef: ', this.state.myRef); //Here we can take data from Form
debugger; //todo: remove
}
render() {
return (
<div>
<Form ref={this.state.myRef}> { /*Here we're connecting the form's ref to State*/}
<Form.Group controlId='formName'>
<Form.Control
type='text'
placeholder='Enter Name'
/>
</Form.Group>
...
<Button
variant='primary'
onClick={handleClose}
>
Save Changes
</Button>
</Form>
</div>
)
}
}