event.currentTarget.name作为currentTarget返回

Question

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

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

如果它按预期工作，name变量将等于我的return语句中的“hoverFontColor”字符串，该字符串将作为css对象的键传递到handleChange，value将操纵mobx状态树。

任何帮助都很感激！

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

解决方案编辑**——我的手的变化被绑定到一个去盎司。我必须更新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

请参见上面的“我的解决方案编辑”。我的handleChange函数绑定到一个去Bounce，因此我必须在onChange属性中包含event.persist（）。

Answer 2

我觉得你需要改变

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 3

最近我遇到了同样的问题，我使用了React.FormEvent

所以为了详细说明，尝试更改React。更改事件