Question

我有这个子组件呈现＆＃34;报告bugg＆＃34;按钮，并在按下时显示报告bugg表单。例如：按下按钮 - ＆gt; state update to report_toggle = true

如此代码所示：

import React from 'react';
import ReportBox from './ReportBox';

class ReportBugButton extends React.Component {
  constructor(){
    super();

    this.toggleReportBox = this.toggleReportBox.bind(this);
    this.reportSubmit = this.reportSubmit.bind(this);

    this.state = {
      report_toggle: true
    }
  }
  toggleReportBox(e){
    e.preventDefault();
    this.state.report_toggle ? this.state.report_toggle = false : this.state.report_toggle = true;
    console.log("State ist: ", this.state.report_toggle);
  }
  reportSubmit(e){
    e.preventDefault();

  }
  render() {
    return(
      <div>
        <a href="#" onClick={this.toggleReportBox} className="report-button tooltip" title="Report a bug"><i className="fa fa-bug"></i></a>
        { this.state.report_toggle ? <ReportBox toggleReport={this.toggleReportBox} submitReport={this.reportSubmit} /> : '' }
      </div>
    );
  }
}

export default ReportBugButton;

单击“报告”按钮时，控制台日志完美地显示状态正在更新，因为它始终在＆＃34;状态为：true＆＃34;之间变化。和＆＃34;陈述是：假＆＃34;。

不幸的是，如果渲染方法中的内联似乎并不在乎，因为如果状态为真，它就不会显示该组件。

如果我默认情况下将状态设置为true，则会显示该状态，但在通过单击将其设置为false时不会被隐藏。

有什么想法吗？ ...... :)

Answer 1

你正在以错误的方式改变状态。你应该永远直接修改状态变量。

使用this.setState。

e.g

   this.setState({ report_toggle: !this.state.report_toggle });

只有在调用此函数时，才会触发render函数并重新渲染（仅当某些状态变量发生更改时）。

ES6反应状态变化不会影响渲染内联if子句

1 个答案: