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道具不应该使用.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

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

您正在通过在_showMessage处理程序中使用()来调用onClick函数。您只想将引用传递给函数，即不使用()

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

Answer 2

绑定或使用箭头功能is not suggested，因为这些功能将在每个渲染器中重新创建。这就是为什么您看到这些警告的原因。与其绑定或调用箭头功能，不如将其与参考结合使用，然后稍微更改一下功能。

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

我们不是使用布尔值，而是通过使用其先前的值来更改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>

如何修复JSX道具不应该使用.bind（）错误

2 个答案: