Question

我有一个textarea，我正在尝试获取价值并将其设置为state。但是它的工作是如此缓慢，所以我正在输入一些东西，并且10-15秒后我看到了价值。为什么会发生？

我的状态：

constructor(props) {
    super(props);
    this.state = {
      comment: ''
    };
    this.getValue = this.getValue.bind(this)
  }

我的onChange函数：

getValue = (e) => {
   this.setState({comment: e.target.value})
}

我的文本区域：

 <textarea
   type="text"
   value={this.state.comment}
   onChange={this.getValue}
 />

Answer 1

下面的代码片段似乎运行良好，并且没有您所说的延迟，您的代码是否与此相似？您可以分享更多详细信息吗？状态更新在应用程序的其余部分是否正常工作？

class Thingy extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      comment: ''
    };
  }
  
  getValue = (e) => {
   this.setState({comment: e.target.value})
  }
  
  render() {
    return (
    <React.Fragment>
      <p>{this.state.comment}</p>
      <textarea
       type="text"
       value={this.state.comment}
       onChange={this.getValue}
      />
    </React.Fragment>
    );
  }
}

// Render it
ReactDOM.render(
  <Thingy />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 2

您是否尝试过使用钩子？

import React, { useState } from 'react';

const App = () => {
  const [comment, setComment] = useState('');

  return (
    <div>
      <textarea
        type="text"
        value={comment}
        onChange={e => setComment(e.target.value)}
      />
    </div>
  );
}
export default App;

Answer 3

这对我来说很好。摆弄它：https://jsfiddle.net/wbkjenay/

<Browsable(False)>
<DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)>
Public Overrides Property Text As String
' or
' Public Shadows Property Text As String

Answer 4

这是钩子方法，希望对您有所帮助！

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "name"
  const [name, setname] = useState();

  return (
    <div>
      <p>Your name :{name}</p>
      <textarea onChange={e => setname(e.target.value)} value={name}/>
    </div>
  );
}
export default Example

在onChange中使用时，反应setState工作缓慢

4 个答案: