如何在反应语义 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

因为你用了arrow运算符，this.inputtext.value就不行了，你需要写：

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

在这种情况下，semantic-ui 的 Input 组件是包裹在 input 之上的 div。所以你不能通过 ref 直接访问 input 元素。你应该使用反应的首选方式来获取价值，即

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


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

或不使用绑定，babel-preset-stage-2为此需要ui红色。

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


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

Answer 2

您需要使用正常的 class 方法才能正常工作。您也不应该在参考文献中使用分号。

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

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

Answer 3

在你的情况下，你也可以通过这段代码获取输入值：

this.inputtext.inputRef.value

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

How to take inputs from <Input/> in react semantic UI

reactjs

semantic-ui

semantic-ui-react