event.currentTarget.name作为currentTarget返回

Question

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

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

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

感谢您的帮助！

edit**我忘了提到TextField组件是MaterialUI组件

解决方案编辑**--我的处理更改注定要失败。我不得不更新我的onChange组件属性，所以event.persist()在此之前运行。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

我最近遇到了同样的问题，我使用了React.FormEvent<HtmlInputElement>。这给了我接口上的event.currentTarget.name。这有帮助吗？

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

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

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

Answer 4

使用e.currentTarget.getAttribute('name')

示例：

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