Question

我有新的反应和ES6。我想打印（this.state）类型变量的数据。

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

我的代码

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，尝试改变＆＃39; p＆＃39;标记为＆＃39; div＆＃39;标签和其他问题的不同方法发布在这里，但即使这样也没有用。

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

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

Answer 1

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

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

1 个答案: