将（this.state）类型变量直接插入 JSX答案

【问题标题】：insert (this.state) type variables directly into the JSX将（this.state）类型变量直接插入 JSX
【发布时间】：2017-11-20 16:33:44
【问题描述】：

我是 react 和 ES6 的新手。我要打印（this.state）类型变量的数据。

我的代码创建了一个随机字符串，我能够做到这一点。我可以将 this.state.resultCode 直接打印到控制台，但不能在“p”标签中打印它的值。

我的代码

import React, { Component } from 'react';
import { FormGroup, FormControl, Checkbox } from 'react-bootstrap';

class ButtonComponent extends Component {

  constructor(props){
    super(props);
    this.state = {
      smallLetters: false,
      capitalLetters: false,
      numbers: false,
      specialCharacters: false,
      resultCode: ''
    }
  }

  generateCode(){
    let mask = '';
    if(!this.state.smallLetters && !this.state.capitalLetters && !this.state.numbers && !this.state.specialCharacters){
      mask = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789~`!@#$%^&*()_+-={}[]:";\'<>?,./|\\';
    } else {
      if (this.state.smallLetters) mask += 'abcdefghijklmnopqrstuvwxyz';
      if (this.state.capitalLetters) mask += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      if (this.state.numbers) mask += '0123456789';
      if (this.state.specialCharacters) mask += '~`!@#$%^&*()_+-={}[]:";\'<>?,./|\\';
    }
    let result = '';
    for (let i = 32; i > 0; --i)
      result += mask[Math.floor(Math.random() * mask.length)];
    this.setState({resultCode: result});
    console.log(this.state.resultCode);
  }

  toggleChange(number){
    if (number == 0){
      this.setState({smallLetters: !this.state.smallLetters});
    }else if (number == 1) {
      this.setState({capitalLetters: !this.state.capitalLetters});
    }else if (number == 2) {
      this.setState({numbers: !this.state.numbers});
    }else if (number == 3){
      this.setState({specialCharacters: !this.state.specialCharacters});
    }
  }

  render(){
    return(
      <div>
        <form>
        <div className="form-check">
            <Checkbox className="form-check-input" type="checkbox" onClick={() => this.toggleChange(0)}>
             <label className="form-check-label">Small Characters a-z</label>
            </Checkbox>
        </div>
        <div className="form-check">
            <Checkbox className="form-check-input" type="checkbox" onClick={() => this.toggleChange(1)}>
             <label className="form-check-label">Capital Characters A-Z</label>
            </Checkbox>
        </div>
        <div className="form-check">
            <Checkbox className="form-check-input" type="checkbox" onClick={() => this.toggleChange(2)}>
             <label className="form-check-label">Numbers 0-9</label>
            </Checkbox>
        </div>
        <div className="form-check">
            <Checkbox className="form-check-input" type="checkbox" onClick={() => this.toggleChange(3)}>
             <label className="form-check-label">Special Characters</label>
            </Checkbox>
        </div>
        </form>
        <button className="btn btn-outline-primary generateButton" onClick={() => this.generateCode()}>Generate CODE!</button>
        <p>{this.state.resultCode}</p>
      </div>
    )
  }

}

export default ButtonComponent;

这个组件被导出为

import React from 'react';
import ReactDOM from 'react-dom';
import ButtonComponent from './components/global';

ReactDOM.render(
    <ButtonComponent />, document.getElementById('generateButton')
)

我尝试危险地设置 innerhtml，尝试将“p”标签更改为“div”标签以及与此处发布的其他问题不同的方法，但即使这样也没有用。

那么，打印 this.state.resultCode 的数据的正确方法是什么

编辑：将来如果有人遇到此问题，请参阅此代码。代码现在工作正常

【问题讨论】：

标签： javascript reactjs ecmascript-6 jsx

【解决方案1】：

您直接将状态的属性分配给另一个值。这被称为突变，它在 React 中是一个禁忌。执行this.state.numbers = !this.state.numbers 之类的操作不会触发组件的重新渲染。每当您想更改组件的状态时，都需要使用setState。 Read more here.

【讨论】：