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的Input组件是div，位于input之上。所以你不能直接通过ref访问input元素。您应该使用react的首选方法来获取值，即

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


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

或不使用bind，此时需要babel-preset-stage-2。

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


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

Answer 3

您需要使用普通的类方法才能工作。你也不应该在参考文献中使用分号。

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

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

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

3 个答案: