CODEWITHSUNDEEP
reactjstypescriptmaterial-uijsx
mdb
mdb

Reputation: 249

event.currentTarget.name returning as currentTarget

I have a handleChange function in typescript that I call within another function to send the value of changes in a text field to a mobx tree. However, when I set const { name } = event.currentTarget and later log it in the function, the name variable is coming back as 'currentTarget' instead of the name attribute I assign in in my renderHexTextField function, and the value is undefined.

I render a number of different text fields by calling the renderHexTextField function, which takes in two params. The first is the value of the

If it was working as intented, the name variable would equal the 'hoverFontColor' string from my return statement, which would then be passed into handleChange as a key for the css object, and value would manipulate the mobx state tree.

Any help is appreciated!

edit** I forgot to mention that the TextField component is a MaterialUI component

SOLUTION EDIT** -- My handleChange was bound to a debounce. I had to update my onChange component attribute so event.persist() ran before this.handleChange. Thank you Praveen and Chris!

return (
   this.renderHexTextField(css.hoverFontColor, 'hoverFontColor')
)


  private renderHexTextField(input: string, name: string) {
    // name parameter used to specify which state in handleChange function
    if (name === 'fontType' || this._throwHexErr(input) === 'True') {
      // If hex format is correct, render normal text field
      return (
        <TextField
          required={true}
          id="standard-required"
          margin="normal"
          name={name}
          placeholder={input}
          onChange={this.handleChange}
        />
      )
    } else {
      // else render error text field
      return (
        <TextField
          error={true}
          id="standard-error"
          margin="normal"
          name={name}
          placeholder={input}
          onChange={this.handleChange}
        />
      )
    }
  }

  private handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
    const { name, value } = event.currentTarget
    const { store } = this.props
    const currentBot = store.bots.current
    if (currentBot) {
      const id = currentBot._id
      const css: any = toJS(currentBot.theme.css)
      log('css obj >> ', css)
      if (css) {
        css[name] = value
        log('handleChange >>> ', name, value, css)
        currentBot.patchCSS(id, css)
      }
    } else {
      log('No current bot in handleChange')
    }
  }

  private _validateHex(hexcode: string, regex: any) {
    // Regex Testing Function
    log('validating hex')
    return regex.test(hexcode)
  }

  private _throwHexErr(userInput: string) {
    // Return True or Error depending on result of Regex Test
    const regex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/
    if (this._validateHex(userInput, regex)) {
      return 'True'
    } else {
      return 'Error'
    }
  }

Upvotes: 2

Views: 7948

Answers (4)

Mohammad Reza
Mohammad Reza

Reputation: 899

use e.currentTarget.getAttribute('name')

example:

const handleClick = (e) => {
  console.log(e.currentTarget.getAttribute('name'))
}

Upvotes: 0

mdb
mdb

Reputation: 249

See my solution edit above. My handleChange function was bound to a debounce, so I had to include event.persist() in the onChange attribute.

Upvotes: 0

Praveen Rao Chavan.G
Praveen Rao Chavan.G

Reputation: 2860

I think you need to change

const { name, value } = event.currentTarget

to

const { name, value } = event.target

or

const name = event.target.name;
const value = event.target.value;

This should work fine

private handleChange = (event: any): void => {
    const name = event.target.name;
    const value = event.target.value;
    const { store } = this.props
    const currentBot = store.bots.current
    if (currentBot) {
      const id = currentBot._id
      const css: any = toJS(currentBot.theme.css)
      log('css obj >> ', css)
      if (css) {
        css[name] = value
        log('handleChange >>> ', name, value, css)
        currentBot.patchCSS(id, css)
      }
    } else {
      log('No current bot in handleChange')
    }
  }

also, do

<TextField
          error={true}
          id="standard-error"
          margin="normal"
          name={name}
          placeholder={input}
          onChange={(event) => this.handleChange(event)}
        />

Upvotes: 1

Christopher Slater
Christopher Slater

Reputation: 884

I have had the same trouble recently, I have used React.FormEvent<HtmlInputElement>. That gives me event.currentTarget.name from the interface. Does that help?

So just to elaborate, try changing React.ChangeEvent<HTMLInputElement> to React.FormEvent<HtmlInputElement>.

Upvotes: 2

Related Questions