在表单上获取点击数据以进行编辑的 React-Redux 问题

Question

我正在使用 redux-react 编写一个 crud 应用程序，我的Read和Create操作成功完成，它们工作得很好！现在我正在尝试实现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);

您可能会注意到表中一个名为Edit的按钮，当我单击它时，我的表单按钮应该save更改为update这是我form.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);

这是我postReducer.js文件：

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;

这是我App.js文件：

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;

这是我index.js文件

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'))

任何人都可以帮助我实现这一目标吗？ 当我单击表格的编辑按钮时，表单应填充单击的数据，表单按钮应更改为"更新"？

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

Answer 1

你应该在App.js中创建一个函数，从Table获取数据并发送到Form。

将该函数传递给您的Table，并将数据传递给Form。

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>
);
}
}

在Table组件中，您的onEdit函数应该是

onEdit = (item) => {  //Use arrow function to bind `this`
this.props.selectedData(item);
}

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

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

Form组件中，state应从props获取数据

this.state = {name: this.props.selectedData.name, age: this.props.selectedData.age, email: this.props.selectedData.email}

你应该有componentDidUpdate方法来处理下一个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>