More Context in onChange

[bradennapier]

More Context in onChange

[Dror-Bar]

Would be nice to have access to (e) from onChange e.g. onClick={(e) => onRemove(key)}.
I want to do preventDefault for instance.

[olahol]

Sounds like a great idea, I will add it later today.

[bradennapier]

Awesome! I actually found a solution to the problem but i am cheating a bit so this solution would be better. For those using Redux-Form I will post my example below.

Then I am calling a function in the parent component to the form which changes the initial values of the form with the new tags and feeds them back down into this component. It does the job well enough, having extra arguments to show which indexes changed would still be ideal!

Thanks for this component, it's working well for email inputs! The Regex and paste splitting is especially convenient.

const EmailInputField = ({
  fieldProps, 
  addOnPaste = true, 
  onlyUnique = true, 
  label = 'Name', 
  ...props
}) => {

  const { removeField } = fieldProps

  const tagsProps = {
    ...props,
    addOnPaste,
    onlyUnique,
    renderTag: ({tag, key, onRemove, ...other}) => (
      <span key={key} {...other}>
        {tag}
        <a onClick={() => removeField(key)} />
      </span>
    ),
    pasteSplit: data => data.split(',').map(d => d.trim()),
    validationRegex: /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i,
  }

  return (
    <div>
      <div className={styles.labelColumn}>
        {label}
      </div>
      <div className={styles.fieldColumnTags}>
          <Tags {...tagsProps} />
      </div>
    </div>
  )

}

[olahol]

Thank you for the example @bradennapier , I'm glad that you like the component 😄

I have added in two more arguments to onChange in version 3.6.2, changed an array of tags that have changed and changedIndexes and array of indexes of the tags that have changed. Hope this will suit your needs.

[bradennapier]

Awesome, this is perfect! Much appreciated!

[diessica]

@olahol Isn't it a breaking change? I guess it should be released in a major version.

[olahol]

@diessica You think so? Is adding two extra arguments to onChange breaking? I cant see it unless somebody passes this.setState directly to onChange.

[bradennapier]

Or if they were to use spread operators on arguments for some reason when only a single argument was present before. I wouldn't think this is breaking.

[aravindmanikandanpalanisamy]

Can you share code for EmailInputField use in redux form Or what data give to fieldProps