event.currentTarget.name возвращается как currentTarget

Question

У меня есть функция handleChange в машинописи, которую я вызываю в другой функции, чтобы отправить значение изменений в текстовом поле в дерево mobx. Однако, когда я устанавливаю const { name } = event.currentTarget и позже регистрирую его в функции, переменная имени возвращается как «currentTarget» вместо атрибута имени, который я назначаю в моей функции renderHexTextField, и значение не определено.

Я отрисовываю несколько различных текстовых полей, вызывая функцию renderHexTextField, которая принимает два параметра. Первое значение

Если бы она работала как задумано, переменная name равнялась бы строке 'hoverFontColor' из моего оператора return, которая затем передавалась в handleChange в качестве ключа для объекта css, а значение управляло бы деревом состояний mobx.

Любая помощь приветствуется!

edit ** Я забыл упомянуть, что компонент TextField является MaterialUI компонента

РЕДАКТИРОВАНИЕ РЕШЕНИЯ ** - Мой handleChange был привязан к отказов. Мне пришлось обновить атрибут компонента onChange, чтобы event.persist () запускался до this.handleChange. Спасибо Правин и Крис!

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'
    }
  }

Answer 1

У меня недавно была такая же проблема, я использовал React.FormEvent<HtmlInputElement>.Это дает мне event.currentTarget.name от интерфейса.Помогает ли это?

Так что, чтобы уточнить, попробуйте изменить React.ChangeEvent<HTMLInputElement> на React.FormEvent<HtmlInputElement>.

Answer 2

См. Мое решение редактировать выше. Моя функция handleChange была связана с debounce, поэтому мне пришлось включить event.persist () в атрибут onChange.

Answer 3

Я думаю, вам нужно изменить

const { name, value } = event.currentTarget

на

const { name, value } = event.target

или

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

Это должно работать нормально

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

также сделайте

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