如何从反应语义UI中的<Input />获取输入

Question

我一直试图从一个input字段中获取输入并使用refs(通常的方式react),但它似乎没有工作.在input我得到的undefined.这是我的代码:

sendMessage = () => {
   console.log(this.inputtext.value);
}

render(){
   return(
      <div>
         <Input ref={input => this.inputtext = input;} placeholder='message'/>
         <Button onClick={this.sendMessage}>Send</Button>
      </div>
   );
}

我需要从click event按钮中获取输入.我无法弄清楚出了什么问题.我怎样才能input正确获得价值？

Answer 1

在您的情况下,您还可以通过以下代码获取输入值:

this.inputtext.inputRef.value

Answer 2

既然你用过arrow操作符，this.inputtext.value就不行了，你需要写：

sendMessage(){
  console.log(this.inputtext.value);
}

在这种情况下，semantic-ui 的InputComponent 被div包裹在input. 所以你不能直接通过 ref 访问输入元素。您应该使用 react 的首选方式来获取值，即

<Input onChange={this.handleMessage.bind(this)} placeholder='message'/>


handleMessage (e) { console.log(e.target.value); }

或不使用绑定，这babel-preset-stage-2是必需的。

<Input onChange={this.handleMessage} placeholder='message'/>


handleMessage = e => { console.log(e.target.value); }