javascript - react 显示/隐藏元素的问题

Question

该项目正在使用 React。

目标是当单击编辑器组件上的最大化图标时，预览组件将被隐藏。当点击预览组件上的最大化图标时，编辑器组件将被隐藏。

问题是，当我单击编辑器组件上的最大化图标时，唯一显示的是文本“未找到”。但预览最大化图标在单击时起作用。

我将状态记录到控制台，因此我知道单击编辑器按钮时状态正在更新，但我无法弄清楚渲染编辑器元素的方式有什么问题。

Codepen 链接:https://codepen.io/Jamece/pen/Exbmxmv

感谢您提供的任何帮助。

import * as marked from "https://cdn.skypack.dev/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98f5f9eaf3fdfcd8acb6a8b6a9aa" rel="noreferrer noopener nofollow">[email protected]</a>";

class Application extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorOnly: false,
      previewOnly: false,
      inputValue: "",
      outputValue: ""
    };
    this.handleChange = this.handleChange.bind(this);
    this.editorChange = this.editorChange.bind(this);
    this.previewChange = this.previewChange.bind(this);
  }

  handleChange(event) {
    this.setState({
      inputValue: event.target.value
    });
  }
  //changes view to editorOnly when editor maximize button is clicked then back to full view when clicked again
  editorChange() {
    this.setState((state) => {
      if (state.editorOnly === false) {
        return { editorOnly: true };
      } else {
        return { editorOnly: false };
      }
    });
  }
  //changes view to previewOnly when preview maximize button is clicked then back to full view when clicked again
  previewChange() {
    this.setState((state) => {
      if (state.previewOnly === false) {
        return { previewOnly: true };
      } else {
        return { previewOnly: false };
      }
    });
  }

  render() {
    console.log(this.state);

    if (this.state.editorOnly === false && this.state.previewOnly === false) {
      return (
        <div className="container-fluid px-0">
          <div className="d-flex flex-column main">
            <Editor editorChange={this.editorChange} 
              handleChange={this.handleChange}/>
            <Preview previewChange={this.previewChange} />
          </div>
        </div>
      );
    } else if (
      this.state.editorOnly === true &&
      this.state.previewOnly === false
    ) {
      return (
          <div className="container-fluid px-0">
          <div className="d-flex flex-column main">
            <Editor editorChange={this.editorChange}
              handleChange={this.handleChange}/>
          </div>
        </div>
      );
    } else if (
      this.state.editorOnly === false &&
      this.state.previewOnly === true
    ) {
      return (
        <div className="container-fluid px-0">
          <div className="d-flex flex-column main">
            <Preview previewChange={this.previewChange} />
          </div>
        </div>
      );
    }
    else {
      return(
      <div></div>
      )
    }
  }
}
class Editor extends React.Component {
      constructor(props) {
        super(props);
      }
      render() {
        return (
          <div className="d-flex justify-content-center">
            <form>
              <div className="boxes">
                <div className="d-flex align-items-center label-bar">
                  <div className="leftcon">
                    <i className="fa-solid fa-book"></i>
                  </div>
                  <div className="headings">Editor</div>
                  <div className="rightcon">
                    <button className="btn" onClick={this.props.editorChange}>
                      <i className="fa-solid fa-maximize"></i>
                    </button>
                  </div>
                </div>
                <textarea
                 value={this.props.inputValue}
                  onChange={this.props.handleChange}
                ></textarea>
              </div>
            </form>
          </div>
        );
      }
}
class Preview extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <div className="d-flex justify-content-center">
          <form>
            <div className="boxes">
              <div className="d-flex align-items-center label-bar">
                <div className="leftcon">
                  <i className="fa-solid fa-book"></i>
                </div>
                <div className="headings">Preview</div>
                <div className="rightcon">
                  <button className="btn" onClick={this.props.previewChange}>
                    <i className="fa-solid fa-maximize"></i>
                  </button>
                </div>
              </div>
              <div className="preview">
                <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
              </div>
            </div>
          </form>
        </div>
      </div>
    );
  }
}
    
ReactDOM.render(<Application />, document.getElementById("app"));

Answer 1

form 元素内的 button 元素默认具有 type="submit"。 因此，当您单击最大化按钮时，它会尝试提交表单，发出 http 请求。

这不是您想要的，因此您应该在按钮上设置 type="button"。这样他们就不会在点击时触发表单提交。

您的 Preview 组件上也会发生同样的情况，但请注意，在控制台中您会收到以下消息:

Form submission canceled because the form is not connected

我相信这是因为您对不同状态下的元素进行排序的方式会导致 React 在 DOM 中重新创建预览窗口。如果您在 Editor 和 Preview 都可见的状态下切换，则 Editor 工作正常，而 Preview 则损坏.