每次我在输入中输入内容时都会调用 setState

debugcn 发表于 Dev

珍妮莉萨珍

所以我面临一个问题，每当我在输入中写一些东西时，handleCommentAdded 被调用，它调用 setState，重新渲染所有东西。这使得在输入中输入或输入的所有内容都显示为评论，我希望在单击提交时输入中的内容显示为评论。我怎样才能解决这个问题？

 class WriteComments extends React.Component {
      constructor(props) {
         super(props);
         this.state = {
         commentAdded:"",
       }
      this.handleButton = this.handleButton.bind(this);
      this.handleCommentAdded = this.handleCommentAdded.bind(this);
  }

  handleCommentAdded(event) {
    this.setState({newComment: event.target.value});
  }

  handleButton() {
    return(
       <div>
       {comment}
       </div>
   )
 }


render() {
  return(
<div>
 <input type="text" value={this.state.commentAdded} onChange=  
   {this.handleCommentAdded}/>

 <div className="button">
    <button
        type="button"
        onClick={e => this.handleButton(e)}
     >
     Write
    </button>
  </div>

) } }

阿维纳什·马拉瓦特

错误正在调用handleCommentAdded中的onChange
设置状态handleButton

class WriteComments extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      commentAdded: ""
    };
    this.inputRef = React.createRef();
    this.handleButton = this.handleButton.bind(this);
  }

  handleButton() {
    this.setState({ commentAdded: this.inputRef.current.value });
  }

  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} />

        <div className="button">
          {this.state.commentAdded !== "" ? (
            <div>{this.state.commentAdded}</div>
          ) : (
            <button type="button" onClick={e => this.handleButton(e)}>
              Write
            </button>
          )}
        </div>
      </div>
    );
  }
}



ReactDOM.render(<WriteComments />, document.getElementById('root'));

<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='root' />

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。