反應切換復選框不切換

我正在嘗試在我的 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>)
  }
}

uj5u.com熱心網友回復：

這是您如何更新狀態的問題

試試下面

  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);
}

標籤：javascript html 反应

上一篇：在javascript中找不到非異步函式

下一篇：從SQLServer取出格式化后的文本如何列印