I am working with react and using Ant Design v4.1.0.
I have a form and on submit (onFinish), I send the id to reducer to get all the values of the fields. I am doing so because of my requirement (I've to select the id on the form itself and get all data many times also open same form from many place with specific id). There might be better ways to achieve my requirement but for now I'm doing so.
I am getting the desired data - props (I verified) but I'm not able to update fields with new props.
I have set
class CustomForm extends React.Component {
formRef = React.createRef();
constructor()
render(){
return(
<Form
ref={this.formRef}
onFinish={this.onFinish}
name="customForm"
initialValues=
{{
//(trying) email: this.props.customerData.map((d) => d.email)
}}
>
<Form.Item label="Email" name="email">
<Input />
</Form.Item>
</Form>
)}
}
I read ant design document and it is mentioned initialvalues does not work on state change and we should use setFieldsValue.
When trying I added "formRef" for class based form as per their example but not able to use setFieldValue.
I tried with
componentDidUpdate(){
alert(JSON.stringify(this.props.customerData.map((d) => d.email)));
this.formRef.current.setFieldsValue({
mobileNumber: this.props.customerData
.map((d) => d.mobile_number),
email: this.props.customerData.map((d) => d.email),
});
}
and getting error Cannot read property 'setFieldsValue' of null
How can I set values, actually use setFieldValues?
And why this.formRef is null?
So on onFinish i set loading = true and my return was
(this.state.loading ? <Spin /> : <Form />)
The reason i was getting this.formRef = null.
Now solved the issue.
Thanks
Related
I was doing autocomplete class so I wanted to set the state in each changes of input value.
like:
state = {
value: ""
}
render(){
console.log("called");
return(
<div>
<input type="text" onChange={(e) => this.setState({value: e.target.value})/>
</div>
);
}
So in console I get "called" twice in each changes.
Could you please tell if it is fine or not?
You shouldn't assign the values to the state that way, the recommended way for Class based components is to use
this.setState()
This code works fine if the user selects something from each dropdown menu, but if they forget to make a selection, it will just use the value selected from the previous dropdown menu. Also if they don't make any selection at all and submit, it will obviously submit the default value stored in the state which is "0".
Anyone happen to have a workaround for this? Thanks.
export class Content extends Component {
constructor(props){
super(props)
this.state = {
selectedOption: 0
}
}
handleOptionChange = e => {
this.setState({
selectedOption: e.target.value
})
}
handleSubmit = e => {
e.preventDefault()
}
render() {
let snowboardItems = this.props.snowboards.map((board,index) => {
return <div><form onSubmit={this.handleSubmit}>
<li key={index} className="list_item">
<div className="content_div1">
<h3>{board.name}</h3>
<h3>$ {board.price}</h3>
<h4>{board.terrain}</h4>
<h4>Shape: {board.shape}</h4>
<p>Board Length:</p>
<select value={this.state.selectedOption} onChange={this.handleOptionChange}>
{board.length.map((item, index) =>
<option value={item} key={index}>{item}</option>
)}
</select> cm
</div>
<div className="content_div2">
<button className="content_button" type="submit" onClick={() => this.props.addToCart({board}, this.state.selectedOption)}>Add to Cart</button>
<img className="image" src={board.imageurl} />
</div>
</li>
</form>
</div>
})
This is really a case where you should separate this into two components: one to render the list of items (you could do this in the parent passing the props too), and another to render the item and possibly handle its state.
If for some reason you can't though, you'll probably want to separate each board option into its own property on state. Here's an example where state is updated dynamically:
https://codesandbox.io/embed/snowboards-pl9r5
You should always code defensively, so in the example there's a "short circuit" check to make sure that a length was selected before adding it to the cart. Also the select field is marked as required so that you can use HTML5 as another fallback validator.
You can check it by trying to add an item without a length and also selecting different options and adding them to the cart (logging them in the console).
On another note: I changed it to more specific keys because mapping multiple lists and using the index as a key will result in duplicate keys. Keys are how react knows which item is which, and you don't want to confuse react!
P.S. Way to bum me out giving a snowboard example in the summer! lol Happy hackin'
I have a component in a React class in my Laravel project which is a simple form with one input field. It houses a phone number which I have retrieved from the database and passed back through the reducer and into the component as a prop. Using this, I have passed it through to the module as a prop which then populates the field with the currently saved value:
<OutOfOfficeContactNumberForm
show={props.showOutOfOffice}
value={props.outOfOfficeNumber}
handleChange={console.log("changed")}
/>
I have a handleChange on here which is supposed to fire a console log, but it only ever displays on page load. Here is my form module class:
class OutOfOfficeContactNumberForm extends React.Component {
render() {
const { show, value, handleChange } = this.props;
if(!show) return null;
return (
<div>
<p>
Please supply an Out of Office contact number to continue.
</p>
<InputGroup layout="inline">
<Label layout="inline" required={true}>Out of Office Contact Number</Label>
<Input onChange={handleChange} value={value} layout="inline" id="out-of-office-number" name="out_of_office_contact_number" />
</InputGroup>
</div>
);
}
}
export default (CSSModules(OutOfOfficeContactNumberForm, style));
The form is embedded in my parent component, as follows:
return (
<SectionCategoriesSettingsForm
isSubmitting={this.state.isSubmitting}
page={this.props.page}
show={this.props.show}
categories={this.props.categories}
submitSectionCategoriesSettings={this._submit.bind(this, 'add')}
updateSelectedCategories={this._updateSelectedCategories.bind(this)}
selectedCategoryIds={this.state.selectedCategoryIds}
storedUserCategories={this.props.selectedCategories}
outOfOfficeNumber={this.state.outOfOfficeNumber}
onUpdateContactNumber={this._updateContactNumber.bind(this)}
/>
);
In my componentWillReceiveProps() function, I set the state as follows:
if (nextProps.selectedCategories && nextProps.selectedCategories.length > 0) {
this.setState({
outOfOfficeNumber: nextProps.outOfOfficeNumber,
selectedCategoryIds: nextProps.selectedCategories.map(c => c.id)
});
}
I'm pretty sure the reason it's not changing is because it's pre-loaded from the state which doesn't change - but if I cannot edit the field how can I get it to register a change?
EDIT: Just to clarify there are also checkboxes in this form for the user to change their preferences, and the data retrieved for them is set the same way but I am able to check and uncheck those no problem
Changes:
1- onChange expect a function and you are assigning a value that's why, put the console statement inside a function and pass that function toOutOfOfficeContactNumberForm component , like this:
handleChange={() => console.log("changed")}
2- You are using controlled component (using the value property), so you need to update the value inside onChange function otherwise it will not allow you to change means input values will not be not reflect in ui.
Check example:
class App extends React.Component {
state = {
input1: '',
input2: '',
}
onChange = (e) => this.setState({ input2: e.target.value })
render() {
return(
<div>
Without updating value inside onChange
<input value={this.state.input1} onChange={console.log('value')} />
<br />
Updating value in onChange
<input value={this.state.input2} onChange={this.onChange} />
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app' />
I think the best way is when you get data from database put it to state and pass the state to input and remember if you want to see input changes in typing, use a function to handle the change and that function should change state value.
class payloadcontainer extends Component {
constructor(props) {
super(props)
this.state = {
number:1
}
}
render() {
return (
<div>
<input value={this.state.number} onChange={(e)=>this.setState({number:e.target.value})}></input>
<button onClick={()=>this.props.buyCake(this.state.number)}><h3>buy {this.state.number} cake </h3></button>
</div>
)
}
}
I have a form which is passed a value through props, and submits to an endpoint to update a users information. However, I'm unable to send an edited value of the text input field, as its state needs to be managed and updated when a user changes its value, but having trouble setting/updating the state of the input when the user changes the value, allowing a different value to be posted.
class DisplayNameModal extends React.Component {
constructor (props){
super(props)
this.state = {
displayName: this.props.displayName,
email: this.props.email.split('#')[0]
}
this.updateDisplayName = this.updateDisplayName.bind(this)
}
updateDisplayName () {
const email = this.props.email
const displayName = this.state.displayName
const user = {
email,
displayName
}
superagent
.put('/api/user')
.send({user})
.then(this.closeModal)
}
handleDisplayNameChange = e => this.setState({ displayName: e.target.value })
render (props) {
const {contentStrings} = this.props.config
return (
<div>
{ !this.props.displayNameModalActive &&
<div className='display-name-container' style={{ backgroundImage: `url(${this.props.bgImgUrl})` }}>
<div className='display-name-content'>
<h2 className='heading'>{contentStrings.displayNameModal.heading}</h2>
<p>{contentStrings.displayNameModal.subHeading}</p>
<input type="text"
defaultValue={this.state.displayName}
onChange={this.handleDisplayNameChange}
minLength="3"
maxLength="15"/>
<button
type='submit'
onClick={this.updateDisplayName}
className='btn btn--primary btn--md'>
<span>{contentStrings.displayNameModal.button}</span>
</button>
<p className='cancel'>{contentStrings.displayNameModal.cancel}</p>
</div>
</div>
}
</div>
)
}
}
export default DisplayNameModal
I think you need an onChange on your <input /> to update displayName on component state.
handleDisplayNameChange = e => this.setState({ displayName: e.target.value });
<input type="text"
value={this.state.displayName}
minLength="3"
maxLength="15"
onChange={this.handleDisplayNameChange}
/>
and instead of defaultValue, use value to make it a controlled input
So then in your updateDisplayName, you would use this.state.displayName instead of this.props.displayName. The prop is just being used to set the initial component state value, allowing it to be edited.
onChange event, call a method, and inside it use this.setState to set the changed text to state as you type in Input box.
On submit, use the updated State value to pass it to the API.
In this way, you can maintain updated value in local state.
You are using uncontrolled input element, ie React doesnt know, wats going on with ur input element.
In order, for React to know about it, it hould be made controlled component.
This can be done by connecting it value to the the state of the component,
Check example below.
This means, that at any time, react will know, wat is the value of the input element
Controlled Components
In HTML, form elements such as , , and typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().
We can combine the two by making the React state be the “single source of truth”. Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a “controlled component”.
For example, if we want to make the previous example log the name when it is submitted, we can write the form as a controlled component:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
Since the value attribute is set on our form element, the displayed value will always be this.state.value, making the React state the source of truth. Since handleChange runs on every keystroke to update the React state, the displayed value will update as the user types.
With a controlled component, every state mutation will have an associated handler function. This makes it straightforward to modify or validate user input. For example, if we wanted to enforce that names are written with all uppercase letters, we could write handleChange as:
handleChange(event) {
this.setState({value: event.target.value.toUpperCase()});
}
I am using redux form for a React app I am working on, the redux form version is V.6. I am also using a wizard style form(so after each fieldset is completed the user can click a "proceed to next step" button to fill out the next section of the form). So what I want to happen is that when the user fills out the "shipping and delivery" fieldset, I want the "billing and payment" feildset(the next feildset in the form) to auto fill with the values entered in the "shipping and delivery" fieldset. They both are identical fieldsets.
Unfortunately it seems like I will not be able to use the intialValues prop since the form will already be rendered when the users enters their values into the form. I also run into issues setting values in the redux form manually in the backend as redux form doesn't seem to be a fan of this method. I can set the value manually, but then I can no longer update it with the input field
In hindsight I wish I built the form more like the example wizard form on the redux form webpage where each "feildset" is actually its own form, but as of right now I can't go back and make those changes, so it all needs to stay as one big form.
If anyones has any advice or opinions please let me know!
The form dumbed down looks like this:
<form>
<ShippingAndDelivery
checkFieldsetProgress={this.checkFieldsetProgress}
handleUpdatingDeliveryType={handleUpdatingDeliveryType}
availableShippingTypes={availableShippingTypes}
shippingType={shippingType}
handleShippingRequest={handleShippingRequest}
recieveShippingError={recieveShippingError}
shippingError={shippingError}
/>
<BillingAndPayment
checkFieldsetProgress={this.checkFieldsetProgress}
handlePopulateBillingAddress={handlePopulateBillingAddress}
promoCodeValue={promoCode}
/>
</form>
It is also in an es6 class so i can mess with states and everything if I need to.
The fieldset components(so ShippingAndDelivery and BillingAndPayment) use the and component like this:
class shippingAndDelivery extends React.Component {
render () {
const {
whatEverPropsNeeded
} = this.props;
return (
<div>
<Fields
names={[
'address_shipping',
'email_shipping'
]}
component={RenderedFields}
whatEverPropsNeeded={whatEverPropsNeeded}
/>
</div>
)
}
}
const RenderedFields = ( fields ) => (
<div className={style.container} onChange={fields.updateProgress(fields)}>
<Col md={8}>
<fieldset>
<div className={style.title}>
<p>Shipping Address</p>
</div>
<Col md={12}>
<BasicInput
input={fields.email_shipping.input}
meta={fields.email_shipping.meta}
disabled={false}
placeholder="Email Address"
/>
</Col>
<Col md={12}>
<BasicInput
input={fields.address_shipping.input}
meta={fields.address_shipping.meta}
disabled={false}
placeholder="Address Line 1"
/>
</Col>
</div>
</fieldset>
</div>
);
You can use the enableReinitialize prop of reduxForm to re-initialize the form any time initialValues changes, thus enabling you populate the downstream fields with values from the upstream.
I would use formValueSelector to extract the values from the redux store and set them to initialValues. Use the keepDirtyOnReinitialize prop to make sure reinitialization does not overwrite your unsaved changes to the shipping address. Example:
const selector = formValueSelector('MyFormName')
const mapStateToProps = reducers => {
// obtain shipping address values from the redux store
const {
address,
addressOptional,
city,
zipCode,
country
} = selector(reducers, 'shipping')
return {
initialValues: {
// shipping address is empty initially
shipping: {
address: '',
addressOptional: '',
city: '',
zipCode: '',
country: ''
},
// billing address initial values are changed any time
// the shipping address values are changed
billing: {
address,
addressOptional,
city,
zipCode,
country
}
}
}
}
#connect(mapStateToProps)
#reduxForm({
form: 'MyFormName',
// reinitialize the form every time initialValues change
enableReinitialize: true,
// make sure dirty fields (those the user has already edited)
// are not overwritten by reinitialization
keepDirtyOnReinitialize: true
})
class MyFormContainer extends MyFormComponent {}
Hope this helps!