javascript - 如何修复 JSX props 不应使用 .bind() 错误

Question

我有一个简单的组件，可以在按钮上显示数据onClick 事件。这是我的组件:

import React, { Component } from 'react';
import './cardCheck.css';

class CardCheck extends Component {
  constructor(props) {
    super(props);
    this.state = { showMessage: false };
  }

  _showMessage = bool => {
    this.setState({
      showMessage: bool
    });
  };

  render() {
    return (
      <div>
        <div className="newsletter-container">
          <h1>Enter the ID of your card:</h1>
          <div className="center">
            <input type="number" />
            <input type="submit" value="Check" onClick={this._showMessage.bind(null, true)} />
          </div>
          <div className="results" />
          {this.state.showMessage && (
            <div>
              hello world!
              <button onClick={this._showMessage.bind(null, false)}>hide</button>
            </div>
          )}
        </div>
        <h1>Offers:</h1>
      </div>
    );
  }
}

export default CardCheck;

代码有效，但我的控制台中出现此错误:

JSX props should not use .bind()

我读到了它并将我的函数更改为箭头函数，如下所示:

import React, { Component } from 'react';
import './cardCheck.css';

class CardCheck extends Component {
  constructor(props) {
    super(props);
    this.state = { showMessage: false };
  }

  _showMessage = bool => () => {
    this.setState({
      showMessage: bool
    });
  };

  render() {
    return (
      <div>
        <div className="newsletter-container">
          <h1>Enter the ID of your card:</h1>
          <div className="center">
            <input type="number" />
            <input type="submit" value="Check" onClick={this._showMessage()} />
          </div>
          <div className="results" />
          {this.state.showMessage && (
            <div>
              hello world!
              <button onClick={this._showMessage()}>hide</button>
            </div>
          )}
        </div>
        <h1>Offers:</h1>
      </div>
    );
  }
}

export default CardCheck;

错误消失了，但我的代码现在无法运行。使用箭头函数执行此操作并仍然使其工作的正确方法是什么？

Answer 1

绑定(bind)或使用箭头函数 is not suggested因为这些函数将在每次渲染中重新创建。这就是您看到这些警告的原因。不要使用箭头函数进行绑定(bind)或调用，而是将其作为引用使用并稍微更改您的函数。

_showMessage = () =>
    this.setState( prevState => ( { 
       showMessage: !prevState.showMessage,
}) );

我们不使用 bool 值，而是使用其先前的值来更改 showMessage 值。在这里，我们使用 setState 和一个函数来使用先前的状态，因为 setState 本身是异步的。

在您的元素中，您将使用此函数及其引用。

<input type="submit" value="Check" onClick={this._showMessage} />

工作示例。

class CardCheck extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showMessage: false };
  }

  _showMessage = () =>
      this.setState( prevState => ( { 
         showMessage: !prevState.showMessage,
  }) );

  render() {
    return (
      <div>
        <div className="newsletter-container">
          <h1>Enter the ID of your card:</h1>
          <div className="center">
            <input type="number" />
            <input type="submit" value="Check" onClick={this._showMessage} />
          </div>
          <div className="results" />
          {this.state.showMessage && (
            <div>
              hello world!
              <button onClick={this._showMessage}>hide</button>
            </div>
          )}
        </div>
        <h1>Offers:</h1>
      </div>
    );
  }
}

ReactDOM.render(
  <CardCheck />,
  document.getElementById("root")
);

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