Reactjs React ES6 const-清除焦点上的输入默认值

我试图在焦点上清除输入的defaultValue，但在内联或外部函数中执行时遇到问题。你认为最好的方法是什么？如果我使用value而不是defaultValue，这是同样的问题

const SomeComponent = (inputValue) => {

<input type="text"
  defaultValue={inputValue}
  onFocus = // clear input defaultValue 
  onBlur={() => dosomething()}/>
}

export default SomeComponent

const SomeComponent=（inputValue）=>{
dosomething（）}/>
}
导出默认组件

这样行吗

onFocus={e=>e.target.value==inputValue？e.target.value=''：return null}

如果要使用React的ref，可以执行以下操作：

const SomeComponent = (inputValue) => (

  <input type="text"
    defaultValue={inputValue}
    ref={input => this.inputField = input}
    onFocus = {() => this.inputField.value = ""} 
    onBlur={() => dosomething()}/>
)

export default SomeComponent

const SomeComponent=（inputValue）=>(
this.inputField=input}
onFocus={（）=>this.inputField.value=”“}
onBlur={（）=>dosomething（）}/>
)
导出默认组件

重置功能

const resetInput = (e) => {
  e.target.value = "";
}

输入HTML

<input type="text"
  defaultValue={inputValue}
  onFocus={(e) => resetInput(e)}
  onBlur={() => dosomething()}/>
}

resetInput（e）}
onBlur={（）=>dosomething（）}/>
}

还是一对一的对焦

<input type="text"
  defaultValue={inputValue}
  onFocus={(e) => e.target.value = ""}
  onBlur={() => dosomething()}/>
}

e.target.value=”“}
onBlur={（）=>dosomething（）}/>
}

您编写的代码无法工作。你需要一个带花括号的

return

函数。

SomeComponent

是无状态的组件吗？这不应该起作用，无状态的函数组件没有

ref

s，因为它们只是常规函数（在你的例子中，

This

不会引用组件），我首先承认，我不是React方面的专家，所以它可能做了一些不该做的事情。但是，如果您将函数传递给ref，即使在这样的无状态组件中，它也会为您提供一个可以稍后引用的对象。如果函数更复杂，我不推荐这种方法。但是，如果功能只是集中在输入上，那么它看起来就像预期的那样工作。将您的代码粘贴到babel.io/repl，您将看到

此

被映射到

未定义的

。或者尝试运行它，它会抛出“TypeError:无法设置未定义的属性'inputField'”谢谢pawel，看起来你是对的。出于某种原因，我的babel/webpack设置正在传输该组件，并包含一个“this”实例供其使用，让上述代码正常工作。