Question

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

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

的值

如果它按预期工作，则名称变量将等于我的return语句中的'hoverFontColor'字符串，然后将其作为css对象的键传递到handleChange中，并且值将操纵mobx状态树。 / p>

感谢您的帮助！

编辑**我忘了提到TextField组件是MaterialUI component

解决方案编辑**-我的handleChange绑定了一个反跳。我必须更新我的onChange组件属性，因此event.persist（）在this.handleChange之前运行。谢谢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（）。

event.currentTarget.name返回为currentTarget

3 个答案: