Skip FOLIO Project Navigation

UI issue-the bind events of the clean icon

Hi ,
the requirement is click the clean icon as the high-light part ,the following fields(User Name,Mobile …) need to be cleared also, please help point that if click the clean icon can trigger which event? thanks.

See this example and the Redux-form selecting values documentation. I haven’t worked directly with formValueSelector, but I suspect you want something like this in your component:

import { formValueSelector, change } from 'redux-form'

componentWillUpdate(nextProps) {
    if (nextProps.userCardNumber === '') {
      this.props.dispatch(change('form', 'userName', ''));
      this.props.dispatch(change('form', 'userMobile', ''));
    }
}

and you will need to connect the form directly to the redux store as in the first example:

UserForm = stripesForm({
  form: 'userForm',
  ...
})(UserForm);
 
const formSelector = formValueSelector('userForm');
export default connect(state => ({
  userCardNumber: formSelector(state, 'userCardNumber'),
  userName: formSelector(state, 'userName'),
  userMobile: formSelector(state, 'userMobile'),
}))(UserForm);