如何在样式化组件React中获取refs.value？

Question

我想要获取输入的ref值，而没有样式化的组件：

<form  role='form' method='POST' onSubmit= {::this.onSubmit}>               
<input id='name' type='text' ref='name' name='name'  required/>
<button> Register</button></form>


 onSubmit(e){
    e.preventDefault();
    console.log(this.refs.name.value)...}

如何在样式组件中获取ref.value？

  <form  role='form' method='POST' onSubmit= {::this.onSubmit}>               
<StyledInput innerRef={name => { this.input = name }} id='name' type='text' name='name' />
<button> Register</button></form>  

 onSubmit(e){
e.preventDefault();
console.log(this.input);....}

Answer 1

添加innerRef={name => { this.input = name }}使输入节点可通过以下方式使用this.input

console.log(this.input.value)

您可以Event不使用而从中获取价值ref

onSubmit(e) {
    console.log(e.target.value)
}

有关React表单的更多详细信息。

演示组件：

console.log(this.input.value)

希望能帮助到你！