Question

我是React JS的新手，我想在单击编辑按钮时打开模式，但这会给我错误'App' is not defined react/jsx-no-undef，有人可以帮助我为什么会收到该错误吗？在单击编辑按钮时，它调用了editTask函数，并且从该函数中调用了toggleModal()函数。在这里，我已经在其中添加了完整的代码，对您的帮助将不胜感激

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './modal.js';    

class PalladiumHub extends React.Component {
  render() {

    return (<tr>
      <td>{this.props.keyuser}</td>
      <td>{this.props.name.name}</td>
      <td><button type="button" onClick={(e) => { this.props.editTask(this.props.index) }} >Edit</button><button onClick={(e) => { this.props.deleteTask(this.props.index) }}>Delete</button></td>
    </tr>
    )
  }
} //{} {}

class CallCRUD extends React.Component {

  constructor(props) {
    super(props);
    this.deleteTask = this.deleteTask.bind(this);
    this.editTask = this.editTask.bind(this);
    this.state = {
      error: null,
      isLoaded: false,
      items: [],
      isOpen: false
    };
  }

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(
        (result) => {

          this.setState({
            isLoaded: true,
            items: result
          });
        },
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  toggleModal() {
      return <App openModal = {this.openModal} />; 
  }


  deleteTask(index) {
    alert(index);
    console.log(index);
    //return false;
    let tasks = this.state.items;

    tasks.splice(index, 1);
    this.setState({
      items: tasks
    })
  }

  editTask(index) {
    this.toggleModal();
    console.log(index);
  }

  render() {
    console.log(this.state.items);
    return (<table border="1"> <tr><th>ID</th><th>Name</th><th>Action</th></tr> {
      this.state.items.map((data, index) => {
        //return console.log(data.id);
        return <PalladiumHub name={data} keyuser={data.id} index={index} key={index} deleteTask={this.deleteTask} editTask={this.editTask} />
      })

    }
    </table>
    );
  }


}


ReactDOM.render(
  <CallCRUD />, document.getElementById('root')
);

modal.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Modal from 'react-modal';  

const customStyles = {
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)'
  }
};

// Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
//Modal.setAppElement('#root')

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      modalIsOpen: false
    };

    this.openModal = this.openModal.bind(this);
    this.afterOpenModal = this.afterOpenModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  openModal() {
    this.setState({modalIsOpen: true});
  }

  afterOpenModal() {
    // references are now sync'd and can be accessed.
    this.subtitle.style.color = '#f00';
  }

  closeModal() {
    this.setState({modalIsOpen: false});
  }

  render() {
    return (
      <div>
        <Modal
          isOpen={this.state.modalIsOpen}
          onAfterOpen={this.afterOpenModal}
          onRequestClose={this.closeModal}
          style={customStyles}
          contentLabel="Example Modal"
        >

          <h2 ref={subtitle => this.subtitle = subtitle}>Hello</h2>
          <button onClick={this.closeModal}>close</button>
          <div>I am a modal</div>
          <form>
            <input />
            <button>tab navigation</button>
            <button>stays</button>
            <button>inside</button>
            <button>the modal</button>
          </form>
        </Modal>
      </div>
    );
  }
}

Answer 1

似乎您没有将App导入PalladiumHub和CallCRUD文件。只是说Reacy不知道App的来源。

单击编辑按钮时，Modal无法使用React js

1 个答案: