Reactjs 在表单上获取单击的数据以进行编辑时出现React Redux问题

我正在用redux react编写一个crud应用程序，我的

读取

和

创建

操作成功完成，效果非常好！现在我正在尝试实现

edit

操作，我希望当我单击edit按钮时，表单应填写我单击的数据，并且表单按钮名称应更改为

update

这是我的

table.js

文件

import React, {Fragment} from "react";
import { connect } from "react-redux";

class Table extends React.Component {

    onEdit (event, index) {

    }

    render() {
        return (
            <Fragment>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Email</th>
                        <th>EDIT</th>

                    </tr>
                </thead>
                <tbody>
                {this.props.employees.map((item, index) => (
                    <tr key={index}>
                        <td>{item.name}</td>
                        <td>{item.age}</td>
                        <td>{item.email}</td>
                        <td>
                        <button
                            type="button"
                            onClick={(event) => this.onEdit(event, index)}
                            >EDIT
                        </button>
                        </td>
                    </tr>
                ))}
                </tbody>
            </Fragment>
        );
    }
}

const mapStateToProps = (state) => ({ employees: state.employees });

export default connect(mapStateToProps)(Table);

import React from "react";
import ReactDOM from "react-dom";

import App from "./components/App";

import { Provider } from 'react-redux'

import { createStore } from 'redux'
import postReducer from '../src/postReducer'

const store = createStore(postReducer)


ReactDOM.render((
  <Provider store={store}>
      <App />
  </Provider>
), document.getElementById('app'))

这是我的

postReducer.js

文件：

import React, { Fragment } from "react"
import { connect } from 'react-redux'

class Form extends React.Component {
    constructor(props) {
        super(props);
        this.state = {name: '', age: '', email: ''};
        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
        };
        this.props.dispatch({type: 'ADD_POST', data})
    }

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


    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>

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

                <button onClick={(event) => this.submit(event)} type="button">SAVE</button>

            </form>
        );
    }
}

export default connect(null)(Form);

var initialState = {
  employees: [{name: 'jhon', age: '23', email: 'a@a'}, {name: 'doe', age: '24', email: 'b@a'}] 
};

var postReducer = (state = initialState, action) => {
    switch(action.type) {
      case 'ADD_POST':
        return {
          ...state,
          employees: [...state.employees, action.data],
        }
      default:
        return state;
    }
  };


export default postReducer;

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

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }


    render() {
        return (
            <React.Fragment>   
              <Form />          
            <table>
                <Table />
            </table>
            </React.Fragment>
        );
    }
}
export default App;

这是我的

App.js

文件：

import React, { Fragment } from "react"
import { connect } from 'react-redux'

class Form extends React.Component {
    constructor(props) {
        super(props);
        this.state = {name: '', age: '', email: ''};
        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
        };
        this.props.dispatch({type: 'ADD_POST', data})
    }

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


    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>

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

                <button onClick={(event) => this.submit(event)} type="button">SAVE</button>

            </form>
        );
    }
}

export default connect(null)(Form);

var initialState = {
  employees: [{name: 'jhon', age: '23', email: 'a@a'}, {name: 'doe', age: '24', email: 'b@a'}] 
};

var postReducer = (state = initialState, action) => {
    switch(action.type) {
      case 'ADD_POST':
        return {
          ...state,
          employees: [...state.employees, action.data],
        }
      default:
        return state;
    }
  };


export default postReducer;

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

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }


    render() {
        return (
            <React.Fragment>   
              <Form />          
            <table>
                <Table />
            </table>
            </React.Fragment>
        );
    }
}
export default App;

有谁能帮我做到这一点吗？当我点击表格的“编辑”按钮时，表格中应该填写点击的数据，表格按钮应该改为“更新”吗

---

我做了很多尝试，但失败了，看了很多视频，

你应该在

App.js

中创建一个函数，从

表

中获取数据并发送到

表单

class App extends React.Component {

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

    selectedData = (item) => {
       this.setState({selectedData: item,isEdit:true})
    }
    render() {
        return (
            <React.Fragment>   
              <Form selectedData={this.state.selectedData} isEdit={this.state.isEdit}/>          
            <table>
                <Table selectedData={this.selectedData} />
            </table>
            </React.Fragment>
        );
    }
}

将该函数传递到

表

，并将数据传递到

表单

class App extends React.Component {

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

    selectedData = (item) => {
       this.setState({selectedData: item,isEdit:true})
    }
    render() {
        return (
            <React.Fragment>   
              <Form selectedData={this.state.selectedData} isEdit={this.state.isEdit}/>          
            <table>
                <Table selectedData={this.selectedData} />
            </table>
            </React.Fragment>
        );
    }
}

对于按钮，您应该只传递选定的数据

<button
    type="button"
    onClick={() => this.onEdit(item)}
>
    EDIT
</button>      

您应该有

componentdiddupdate

方法来处理下一个

props

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

你的按钮应该是

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

this.submit（event）}type=“button”>
{this.props.isEdit？'Update'：'SAVE'}

谢谢，非常感谢您的宝贵时间，您度过了美好的一天