如何在 React 中获取文本框的值？

Posted 2023-02-22

【中文标题】如何在 React 中获取文本框的值？

【英文标题】：How to get value of textbox in React?

【发布时间】：2016-11-20 02:20:27

【问题描述】：

我刚开始使用 React.js，我只是不确定是否有一种特殊的方法来获取文本框的值，在这样的组件中返回：

var LoginUsername = React.createClass(
  render: function () 
    return (
      <input type="text" autofocus="autofocus" onChange=this.handleChange />
    )
  ,
  handleChange: function (evt) 
    this.setState( value: evt.target.value.substr(0, 100) );
  
);

【参考方案1】：

只需将您的输入更新为值

var LoginUsername = React.createClass(
  getInitialState:function()
     return 
        textVal:''
     
 ,
  render: function () 
    return (
      <input type="text" value=this.state.textVal autofocus="autofocus" onChange=this.handleChange />
    )
  ,
  handleChange: function (evt) 
    this.setState( textVal: evt.target.value.substr(0, 100) );
  
);

您的文本输入值始终处于状态，您可以通过 this.state.textVal 获得相同的值

【讨论】：

能否请您提供上述的用例场景？

如果你想从服务器预填充文本输入，那么你需要一个字段在状态

我正在尝试从外部 LoginUsername 访问值 - 现在我正在尝试使用 LoginUsername.state.textVal，但它对我不起作用...

然后你可以使用 ref

【参考方案2】：

如documentation 中所述，您需要使用受控输入。要进行输入 - 受控，您需要在其上指定两个道具

onChange - 每次更改输入时将组件 state 设置为输入 value 的函数 value - 来自组件state 的输入值（例如this.state.value）

例子：

  getInitialState: function() 
    return value: 'Hello!';
  ,
  handleChange: function(event) 
    this.setState(value: event.target.value);
  ,
  render: function() 
    return (
      <input
        type="text"
        value=this.state.value
        onChange=this.handleChange
      />
    );
  

更具体地说，关于 textarea - here

【讨论】：

那么我将如何使用上面的来获取文本框的当前值？

通过替换textarea上的input元素

@DmitriyNevzorov 我应该如何在功能组件上实现同样的功能。