我有两个 reactJS 组件:
- 具有表单和表单处理代码的 CustomerForm 组件。
- 使用 react 表列出客户的 CustomerList 组件。
这两个组件都是功能性的，我可以使用表单向数据库添加数据，然后在 react-table 中获取和显示数据。
但我不知道如何在成功提交表单时刷新 react 表数据。
我将组件直接加载到 HTML 页面中，并使用 babel 来处理 JSX。我刚刚开始使用 reactJS 并且更习惯于 PHP/jQuery 开发，所以也许我正在接近这个错误。非常感谢任何反馈。
我的代码:
客户表单
class CustomerForm extends React.Component {
constructor(props) {
super(props);
this.state = {data: [], name: '', phone: '', nameErr: '', phoneErr: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const target = event.target;
const name = target.name;
this.setState({[name]: event.target.value});
}
handleSubmit(event) {
event.preventDefault();
var self = this;
axios.post(APP_URL + '/customer/add', {
name: this.state.name,
phone: this.state.phone
}).then(function (response) {
//console.log(response);
var data = response.data;
if (data.status === 0) {
if (typeof data.payload === 'object') {
for (var key in data.payload) {
if (data.payload[key]) {
self.setState({[key]: data.payload[key]});
}
}
}
}
}).catch(function (error) {
console.log(error);
});
}
render() {
return (
<div className="container mt-3">
<form onSubmit={this.handleSubmit}>
<div className="row">
<div className="col-6">
<div className="form-group">
<label>Name</label>
<input name="name" type="text" className={'form-control ' + (this.state.nameErr ? 'is-invalid' : '')} placeholder="Enter name" value={this.state.value} onChange={this.handleChange} />
<div className="invalid-feedback">{this.state.nameErr}</div>
</div>
<div className="form-group">
<label>Email address</label>
<input name="phone" type="text" className="form-control" placeholder="Enter phone" value={this.state.value} onChange={this.handleChange} />
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
);
}
}
const domContainer = document.querySelector('#CustomerFormContainer');
ReactDOM.render(e(CustomerForm), domContainer);
客户名单
class CustomerList extends React.Component {
constructor(props) {
super(props);
this.state = {data: [], loading: false, pages: null};
this.fetchData = this.fetchData.bind(this);
}
fetchData(state, instance) {
var self = this;
this.setState({loading: true});
axios.post(APP_URL + '/customer/index', {
page: state.page,
pageSize: state.pageSize,
sorted: state.sorted,
filtered: state.filtered
}).then(function (response) {
// handle success
self.setState({
data: response.data.payload,
pages: 1,
loading: false
});
}).catch(function (error) {
// handle error
console.log(error);
}).finally(function () {
// always executed
});
}
render() {
const {data, pages, loading} = this.state;
return (
<div className="container mt-3">
<ReactTable
columns={[
{
Header: "Name",
accessor: "name"
},
{
Header: "Phone",
accessor: "phone"
}
]}
manual
data={this.state.data}
pages={this.state.pages}
loading={this.state.loading}
onFetchData={this.fetchData}
defaultPageSize={10}
className="-striped -highlight"
/>
<br />
</div>
);
}
}
const domContainer = document.querySelector('#CustomerListContainer');
ReactDOM.render(e(CustomerList), domContainer);
最佳答案
长话短说
在父组件中渲染这两个组件。 Lift the table state up并将一个函数传递给将调用该函数以获取数据的表单。
首先，一个快速提示。在一个 div 中只渲染一个组件，然后将所有其他组件嵌套在其中。
在这两个文件中，您在不同的选择器中呈现组件
客户表单
const domContainer = document.querySelector('#CustomerFormContainer');
ReactDOM.render(e(CustomerForm), domContainer);
客户名单
const domContainer = document.querySelector('#CustomerListContainer');
ReactDOM.render(e(CustomerList), domContainer);
这不好，因为这样，在它们之间共享状态和 Prop 并不容易。
您应该做的是拥有一个呈现这两个组件的根组件。
class App extends React.Component {
render() {
return (
<CustomerForm />
<CustomerList />
)
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(e(App), domContainer);
观察
我不确定 e 函数是什么以及您使用的原因，但我认为这不会改变任何内容，但请说明它是什么。
这样做，您可以在组件之间共享状态和 Prop 。
class App extends React.Component {
constructor(props) {
super(props);
this.state = { data: [], loading: false, pages: null };
this.fetchData = this.fetchData.bind(this);
this.reloadData = this.reloadData.bind(this);
}
reloadData() {
this.fetchData(state);
}
fetchData(state, instance) {
var self = this;
this.setState({ loading: true });
axios
.post(APP_URL + "/customer/index", {
page: state.page,
pageSize: state.pageSize,
sorted: state.sorted,
filtered: state.filtered
})
.then(function(response) {
// handle success
self.setState({
data: response.data.payload,
pages: 1,
loading: false
});
})
.catch(function(error) {
// handle error
console.log(error);
})
.finally(function() {
// always executed
});
}
render() {
return (
<div>
<CustomerForm reloadData={reloadData} />
<CustomerList data={data} pages={pages} loading={loading} fetchData={fetchData} />
</div>
);
}
}
我在这里做的是Lifting State Up .我正在将 CustomerList 的状态传递给父组件，以便您可以在表单调用 reloadData 时重新加载数据。
这样您还需要更改 CustomerList 以从 this.props 获取数据并在 CustomerForm 中调用 reloadData 提交成功时
客户名单
render() { // getting from props
const { data, pages, loading, fetchData } = this.props;
return (
<div className="container mt-3">
<ReactTable
columns={[
{
Header: "Name",
accessor: "name"
},
{
Header: "Phone",
accessor: "phone"
}
]}
manual
data={data}
pages={pages}
loading={loading}
onFetchData={fetchData}
defaultPageSize={10}
className="-striped -highlight"
/>
<br />
</div>
);
}
客户表单
提交成功后调用this.props.reloadData()
*不知道什么时候要重新加载数据，不清楚什么时候成功。
关于javascript - 如何从我的表单组件重新加载/刷新 react 表组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56343081/