时间戳

首页 > 解决方案 > Reactjs隐藏表单单击另一个组件的按钮

reactjs - Reactjs隐藏表单单击另一个组件的按钮

问题描述

我写了一个 crud 应用程序，效果很好！当人们点击按钮时，我已经成功实现了ADD NEW表单将可见

现在，当人们单击按钮时，我面临隐藏表单的挑战SAVE，因为 SAVE 另一个组件。

给你我的Form.js文件：

import React, { Fragment } from "react"
import { connect } from 'react-redux'
const axios = require('axios');

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      id: this.props.selectedData.id, 
      name: this.props.selectedData.name, 
      age: this.props.selectedData.age,
    };
    this.onHandleChange = this.onHandleChange.bind(this);
    this.submit = this.submit.bind(this);
  }

  submit(event) {
    const data = {
      name: this.state.name, 
      age: this.state.age, 
      email: this.state.email
    };
    if (this.props.isEdit) {
      data.id = this.props.selectedData.id;
      axios.put('http://127.0.0.1:8000/api/v1/employee/' + data.id + '/', data)
      .then((response) => {
        this.props.dispatch({ type: 'EDIT_POST', response });
      });
    } else {
      // generate id here for new emplyoee
      axios.post('http://127.0.0.1:8000/api/v1/employee/', data)
      .then((response) => {
        this.props.dispatch({ type: 'ADD_POST', response });
      });
    }
  }

  onHandleChange(event) {
    this.setState({
      [event.target.name]: event.target.value
    });
  }

  componentDidUpdate(prevProps) {
    if (prevProps.selectedData.age !== this.props.selectedData.age) {  //Check on email, because email is unique
      this.setState({ name: this.props.selectedData.name, age: this.props.selectedData.age })
    }
  }



  render() {
    return (
      <form>
        <div className="form-group">
          <input onChange={(event) => this.onHandleChange(event)} value={this.state.name} name="name" type="text" />
        </div>

        <div className="form-group">
          <input onChange={(event) => this.onHandleChange(event)} value={this.state.age} name="age" type="number" />
        </div>

        <button onClick={(event) => this.submit(event)} type="button">
          {this.props.isEdit ? 'Update' : 'SAVE'}
        </button>

      </form>
    );
  }
}

export default connect(null)(Form);

这是我的Home.js文件：

import React from "react"
import Table from "../components/table"
import Form from '../components/form'

class Home extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
           selectedData: {name: '', age: ''},
           isEdit: false,
           isFormVisible: false,
        };
    }

    selectedData = (item) => {
       this.setState({selectedData: item,isEdit:true, isFormVisible: true})
    }
    render() {
        return (
            <React.Fragment>   
              {this.state.isFormVisible && <div>
                <Form selectedData={this.state.selectedData} isEdit={this.state.isEdit}/> 
              </div>}

              {!this.state.isFormVisible && 
            <button onClick={() => this.setState({isFormVisible: true})}>ADD NEW</button>}       
            <table>
                <Table selectedData={this.selectedData} />
            </table>
            </React.Fragment>
        );
    }
}
export default Home;

一切正常，唯一的问题是当我点击SAVE按钮时隐藏表单。

任何人都可以帮助隐藏按钮上的表单SAVE吗？

标签： reactjsredux

解决方案

JS 更新

submit(event) {
    const data = {
      name: this.state.name, 
      age: this.state.age, 
      email: this.state.email
    };
    if (this.props.isEdit) {
      data.id = this.props.selectedData.id;
      axios.put('http://127.0.0.1:8000/api/v1/employee/' + data.id + '/', data)
      .then((response) => {
        // Fire an event
        this.props.onSave && this.props.onSave();
        this.props.dispatch({ type: 'EDIT_POST', response });
      });
    } else {
      // generate id here for new emplyoee
      axios.post('http://127.0.0.1:8000/api/v1/employee/', data)
      .then((response) => {
        // Fire an event
        this.props.onSave && this.props.onSave();
        this.props.dispatch({ type: 'ADD_POST', response });
      });
    }
  }

  hideForm = () => { this.setState({ isFormVisible: false }); }

JSX 更新

<Form 
  selectedData={this.state.selectedData} 
  isEdit={this.state.isEdit}
  onSave={this.hideForm}
/>

推荐阅读