Question

我是React的新手，我正在尝试创建一个用于显示不同内容的模式。我目前已将其设置为具有不同的“模式”状态，并且每种模式都将显示不同的标记，这些标记将作为this.props.children

传递到Modal组件中

这似乎在一定程度上可以工作，但是我在状态处理方面遇到了问题。输入可以很好地更新并显示输入的当前状态，但是一旦将此内容嵌套在Modal组件中，它就会执行一些奇怪的操作，例如不再允许您键入或显示任何键输入（如果有状态内容），任何按键都只会使用最后一个字符来更新状态。

我猜这是因为Modal是带有新构造函数的有状态组件，父应用程序中对“ this”和'handleChange'函数的引用丢失了。

关于我要去哪里哪里或如何正确解决这个问题的任何想法吗？

干杯们：）

代码在这里：

import React, { Component } from "react";
import ReactDOM from "react-dom";

class Modal extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.show !== this.props.show;
  }

  componentWillUpdate() {
    console.log("[Modal] WillUpdate");
  }

  render() {
    return (
      <div
        style={{
          transform: this.props.show ? "translateY(0)" : "translateY(-100vh)",
          opacity: this.props.show ? "1" : "0",
          padding: "20px",
          border: "1px solid"
        }}
      >    
        {this.props.children}
      </div>
    );
  }
}

class App extends Component {
  constructor() {
    super();
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      newItem: "",
      modalOpen: false,
      modalMode: ""
    };
  }
  handleChange(e) {
    const target = e.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }
  openModal(mode) {
    this.setState({
      modalOpen: true,
      modalMode: mode
    });
  }
  render() {
    console.log(this.state);

    let modalContent;

    switch (this.state.modalMode) {
      case 'addItem':
        modalContent = (
          <form>
            <h1>Add Item</h1>
            <input
          type="text"
          name="newItem"
          value={this.state.newItem}
          placeholder="Enter an item"
          onChange={this.handleChange}
        />
          </form>
        )
        break;
      case 'editItem':
        modalContent = (
          <div>
          </div>
        )
        break;
      default:
        modalContent = (null)
    }



    return (
      <div>
        <button onClick={() => this.openModal('addItem')}>Open Modal</button>
        <Modal show={this.state.modalOpen}>
          {modalContent}
        </Modal>
        <h2>Same inputs outside modal</h2>
        <input
          type="text"
          name="newItem"
          value={this.state.newItem}
          placeholder="Enter an item"
          onChange={this.handleChange}
        />
        <input
          type="text"
          name="newItem"
          value={this.state.newItem}
          placeholder="Enter an item"
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

还有一个代码沙箱-https://codesandbox.io/s/qzx14rmy6

Answer 1

可以轻松轻松地修复“值”同步问题，并且状态会正常更新。

<input type="text" name="newItem" placeholder="Enter an item" onChange={this.handleChange} />

我指出了真正的问题。在“ shouldComponentUpdate”中，如果由于任何原因返回“ false”，则处于“未更新”状态的组件。应谨慎使用此方法，因为它可能会破坏您的应用程序。删除该方法或返回true，组件将正常工作。

反应动态模态

1 个答案: