几个星期前我开始学习React并希望创建一个小应用程序。用户将通过表单输入他的详细信息，他的记录将显示在表格中。但是在记录表单字段详细信息之后，我无法将记录显示在表格中，有人可以帮助我。
我有3个组件 - ＆gt;
在ShowForm.jsx中，我能够通过console.log（this.state）中的this.onSubmit函数记录表单字段值;
现在我如何将记录的表单详细信息显示到另一个子组件ShowTable.jsx中。我学到了一些关于动态道具可以将一个组件传递给另一个组件的东西，但是不能按照我的要求在这里实现。
组件：ShowFormRecords.jsx
// Let's import React
import React from "react";
// Import custom component
import ShowTable from "./showformrecords/ShowTable.jsx";
import ShowForm from "./showformrecords/ShowForm.jsx";
// Let's create component [[ShowFormRecords]]
class ShowFormRecords extends React.Component{
render(){
return(
<div className="row">
<div className="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<h3> View Customer Records </h3>
</div>
<div className="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
<ShowTable />
</div>
<div className="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<ShowForm />
</div>
</div>
);
}
}
// Let's render ReactDOM
export default ShowFormRecords;
ShowTable.jsx
// Let's import React
import React from "react";
// Let's create component [[ShowTable]]
class ShowTable extends React.Component{
render(){
return(
<div>
<table className="table table-responsive">
<thead className="thead-inverse">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone No.</th>
<th>Issue</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"> <input type="checkbox" className="form-check-input" /> </th>
<td>Mark</td>
<td>Otto</td>
<td>0000000000</td>
<td>My pc is not working</td>
<td><button type="button" className="btn btn-danger">Delete</button></td>
</tr>
</tbody>
</table>
</div>
);
}
}
// Let's render ReactDOM
export default ShowTable;
ShowForm.jsx
// Let's import React
import React from "react";
// Let's create component [[ShowForm]]
class ShowForm extends React.Component{
// create constructor function for AddCustomer component - to init
constructor(props){
// call super, so constructor function can connect with AddCustomer component - to init super component
super(props);
// Use state add object with their property and value
this.state = {
firstName : "",
lastName : "",
phoneNo : "",
issue : "",
}
// Creat custom change function
this.change = e =>{
this.setState({
[e.target.name]: e.target.value
});
};
this.onSubmit = e =>{
e.preventDefault();
console.log(this.state);
// clear form fields after click on submit button, use setState for setting value
this.setState({
firstName : "",
lastName : "",
phoneNo : "",
issue : "",
})
}
} // close constructor function
render(){
return(
<form onSubmit={e => this.onSubmit(e)}>
<div className="form-group">
<label htmlFor="fname">First name</label>
<input
type="text"
className="form-control"
id="fname"
placeholder="First name"
name = "firstName"
value={this.state.firstName}
onChange = { e => this.change(e) }
// onChange={e => this.setState({firstName: e.target.value})}
/>
{/* call setState for change firstName value */}
</div>
<div className="form-group">
<label htmlFor="lname">Last name</label>
<input
type="text"
className="form-control"
id="lname"
placeholder="Last name"
name="lastName"
value={this.state.lastName}
onChange = { e => this.change(e) }
// onChange={e => this.setState({lastName: e.target.value})}
/>
{/* call setState for change lastName value */}
</div>
<div className="form-group">
<label htmlFor="phone">Phone no.</label>
<input
type="text"
className="form-control"
id="phone"
placeholder="Phone no."
name="phoneNo"
value={this.state.phoneNo}
onChange = { e => this.change(e) }
// onChange={e => this.setState({phoneNo: e.target.value})}
/>
{/* call setState for change phoneNo value */}
</div>
<div className="form-group">
<label htmlFor="issue">Issue</label>
<textarea
className="form-control"
id="issue"
rows="3"
name="issue"
value={this.state.issue}
onChange = { e => this.change(e) }
// onChange={e => this.setState({issue: e.target.value})}
>
{/* call setState for change issue value */}
</textarea>
</div>
<button type="submit" className="btn btn-primary"> Submit </button>
</form>
);
}
}
// Let's render ReactDOM
export default ShowForm;
答案 0 :(得分：0)
将您的状态从ShowForm组件移至ShowFormRecords组件。然后将状态从ShowFormRecords组件传递到ShowTable和ShowForm组件中。通过这样做，您可以在ShowForm组件中更新您的状态，然后在ShowTable组件上呈现该数据。