反应切换复选框不切换

Question

我正在尝试在我的 React 应用程序中包装内容以使用不同的顶级元素。

在我的状态下，我定义了wrapContent: false

我已经定义了一个 toggleWrap 方法。

toggleWrap = () =>  {
this.setState(state => state.wrapContent = !state.wrapContent);
}

最后在我的输入复选框中，我已经包含了 toggleWrap 方法

onChange={this.toggleWrap}

不幸的是，当我运行我的代码时，按下复选框不会将我的组件内容包装在我的 wrapContent 方法中的以下代码中

wrapContent(content){
return this.state.wrapContent
? <div className="bg-secondary p-2">
<div className="bg-light"> {content} </div>

它将我的 render(){} 返回的内容包装在这个组件中。

奇怪的是，当我手动将状态中的wrapContent: false更改为 True 时，我看到浏览器中的复选框已选中，并且渲染中的代码已正确包装。 因此，似乎只是我的 toggleWrap 功能无法正常工作。

有人可以帮忙吗？

完整代码：

import React, { Component } from 'react'
import { ValidationDisplay } from './ValidationDisplay';
import { GetValidationMessages } from './ValidationMessages';

export class Editor extends Component {

  constructor(props) {
    super(props);
    this.formElements = {
      name: { label: "Name", name: "name", validation: { required: true, minLength: 3 } },
      category: { label: "Category", name: "category", validation: { required: true, minLength: 5 } },
      price: { label: "Price", name: "price", validation: { type: "number", required: true, min: 5 } }
    }
    this.state = {
      errors: {},
      wrapContent: false
    }
  }
  // 06.11.21- method is invoked when the content is rendered
  setElement = (element) => {
    if (element !== null) {
      this.formElements[element.name].element = element;
    }
  }

  // handleChange = (event) => {
  //   event.persist()
  //   this.setState(state => state[event.target.name] = event.target.value);
  // }

  handleAdd = () => {
    if (this.validateFormElements()) {
      let data = {};
      Object.values(this.formElements)
        .forEach(v => {
          data[v.element.name] = v.element.value;
          v.element.value = "";
        });
      this.props.callback(data);
      this.formElements.name.element.focus();
    }
  }

  validateFormElement = (name) => {
    let errors = GetValidationMessages(this.formElements[name].element);
    this.setState(state => state.errors[name] = errors);
    return errors.length === 0;
  }

  validateFormElements = () => {
    let valid = true;
    Object.keys(this.formElements).forEach(name => {
      if (!this.validateFormElement(name)) {
        valid = false;
      }
    })
    return valid;
  }
    
      toggleWrap = () => {
this.setState(state => state.wrapContent = !state.wrapContent);

      }
    
  wrapContent(content) {
    return this.state.wrapContent
      ? <div className="bg-secondary p-2">
        <div className="bg-light"> {content} </div>
      </div>
      : content;
  }

  render() {
    return this.wrapContent(
      <React.Fragment>
        <div className="form-group text-center p-2">
          <div className="form-check">
            <input className="form-check-input"
              type="checkbox"
              checked={this.state.wrapContent}
              onChange={this.toggleWrap} />
            <label className="form-check-label">Wrap Content</label>
          </div>
        </div>
        {
          Object.values(this.formElements).map(elem =>
            <div className="form-group p-2" key={elem.name}>
              <label>{elem.label}</label>
              <input className="form-control"
                name={elem.name}
                autoFocus={elem.name === "name"}
                ref={this.setElement}
                onChange={() => this.validateFormElement(elem.name)}
                {...elem.validation} />
              <ValidationDisplay
                errors={this.state.errors[elem.name]} />
            </div>)
        }
        <div className="text-center">
          <button className="btn btn-primary" onClick={this.handleAdd}>
            Add
          </button>
        </div>
      </React.Fragment>)
  }
}

Answer 1

这是您如何更新状态的问题

试试下面

  toggleWrap = () => {
    this.setState({ wrapContent: !this.state.wrapContent });
  };

或者

  toggleWrap = () => {
    this.setState((state) => {
      return { ...state, wrapContent: !this.state.wrapContent };
    });
  };

代替

toggleWrap = () => {
   this.setState(state => state.wrapContent = !state.wrapContent);
}