More Context in onChange

[Braden Napier]

Would be good to have more context in onChange. For example, the ability to know what value was changed specifically. This would make it much easier to implement into a redux-form like environment. Right now I get an array of tags but have no idea what values were actually modified, etc so I can't really send the changed values to redux form very well.

[Ola]

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

[Braden Napier]

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>
  )

}

[Ola]

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.

[Braden Napier]

Awesome, this is perfect! Much appreciated!

[diessica]

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

[Ola]

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

[Braden Napier]

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

[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.