作为currentTarget返回的event.currentTarget.name

Question

我在typescript中有一个handleChange函数，我在另一个函数中调用该函数将文本字段中的更改值发送到mobx树。但是，当我设置const { name } = event.currentTarget并稍后将其记录到函数中时，name变量返回为'currentTarget‘，而不是我在renderHexTextField函数中分配的name属性，并且该值未定义。

我通过调用renderHexTextField函数呈现了许多不同的文本字段，该函数接受两个参数。第一个是

如果它按照预期工作，那么name变量将等于我的return语句中的'hoverFontColor‘字符串，然后该字符串将作为css对象的键传递给handleChange，而value将操纵mobx状态树。

如有任何帮助，我们不胜感激！

编辑**我忘记提到TextField组件是一个MaterialUI component

解决方案编辑** --我的handleChange被绑定到去抖动。我必须更新我的onChange组件属性，以便在this.handleChange之前运行event.persist()。谢谢你们，Praveen和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'
    }
  }

Answer 1

我认为你需要改变

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

Answer 2

我最近也遇到了同样的问题，我用了React.FormEvent<HtmlInputElement>。这给了我来自界面的event.currentTarget.name。这有帮助吗？

因此，为了详细说明，尝试将React.ChangeEvent<HTMLInputElement>更改为React.FormEvent<HtmlInputElement>。

Answer 3

请参阅上面的我的解决方案编辑。我的handleChange函数被绑定到一个去反跳函数，所以我必须在onChange属性中包含event.persist()。