Setting/Clearing input in Redux/React

Question

I would like to know how one can wire in a clear field via redux when using react. For instance, I have a form with some sample code.

 <Field component={datewidget} id ="date" name="date" type="date" label="date" />
 <button type="button"onClick={() => {(clearMyInput());}}>
</button>

The function clearMyInput is dispatched such that:

const mapDispatchToProps = (dispatch) => {
  return {
    clearMyInput: () => {
      return dispatch(clearDate(datedata,value));
    }
  }
}

My question how can one clear the input field by simply clicking on the button and setting the value of the input to none.

For example in jquery, i can write something like this:

$("#button").click(function () {
    $("#date").val("");
});

I would like to know how one can do this using redux forms in react.

do you need to be storing your form input in redux? generally i'd recommend just keeping the user input in the field or in local component state until submit. if you have to use redux so that other components can respond, just be sure to set the value of your input from the redux state so that if you clear that state with a dispatch, the input will get cleared also. (or just give the field a ref and clear it with refs.myInput.value = '') — glortho
– glortho, Commented Sep 14, 2017 at 16:25
Not sure if this is what you're asking, but It sounds like you are just missing the redux reducer that responds to the clearDate action. Normally (if you're using redux instead of local state) you'd bind a value in the store to the component via connect, then dispatch the clearMyInput action. The reducer would respond by resetting that value in the store, and this would reset the value in the form.... — mikebridge
– mikebridge, Commented Sep 14, 2017 at 16:27
clearDate(datedata,value) - where are these values coming from? do you mean clearMyInput: (datedata,value) => {? — Tyler Sebastian
– Tyler Sebastian, Commented Sep 14, 2017 at 16:28
the values "datedata,value" was not meant to be included in this code sample. My apologies. Essentially, after i submit this redux form, the form is now populated the values in the input. At this point I want to have it such that clicking on a button, clears the input field. — Jacklyn N
– Jacklyn N, Commented Sep 14, 2017 at 18:10

Grzegorz Gajda · Accepted Answer · 2017-09-14 16:27:35Z

4

In your Field's component, pass attribute value from your store and attach event handler to dispatch change.

<Field 
  component={datewidget} 
  id="date" 
  name="date" 
  type="date" 
  label="date"
  value={this.props.fieldValue}
  onChange={this.props.changeFieldValue}
/>

Then with dispatching clearDate function, you just need to set all form's values to ''. I recommend to look into Redux Form which do this all without boilerplate.

answered Sep 14, 2017 at 16:27

Grzegorz Gajda

2,4842 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark C. · Accepted Answer · 2017-09-25 19:51:17Z

0

I do want to add as a supplement to the existing answer that there is built-in functionality for clearing a form:

    <button type="button" onClick={reset}>
      Clear Values
    </button>

Notice the {reset} onClick action handler here. This comes out of the box with Redux-Form

answered Sep 25, 2017 at 19:51

Mark C.

6,5004 gold badges39 silver badges74 bronze badges

Comments

pope_maverick · Accepted Answer · 2019-03-25 11:10:52Z

0

import { reset, destroy } from 'redux-form'
  //
  //..code Block
render() {
  const { resetForm, destroyForm } = this.props
  return <ComponentName {...{ resetForm, destroyForm }} {...this.props} />
  }
}

// @formName: for global use(in case if you render more than one form from this container..)
const mapDispatchToProps = dispatch => ({
  resetForm: formName => dispatch(reset(formName)),
  destroyForm: formName => dispatch(reset(formName)),
})

and now you call it from the component

const ComponentName = ({ resetForm, destroyForm }, ...props) => {
  //..code Block
  <button type='submit' onClick={() => resetForm('formName') && destroyForm('formName')} > Clear </button>
}

HAPPY CODING..

answered Mar 25, 2019 at 11:10

pope_maverick

9808 silver badges16 bronze badges

Collectives™ on Stack Overflow

Setting/Clearing input in Redux/React

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related