我有一個input-text允許用戶寫訂單號的，我有一個button驗證訂單是否存在或是否已被使用。
如果訂單有效，它應該檢索該訂單的產品（mongodb和meteor）及其詳細資訊。用戶第一次驗證訂單時，它作業得很好。但是，如果用戶輸入另一個訂單，除非用戶button再次按下（按下一次后），否則表格將不會重新填充。它是一個動態表。
//Validating the order and Bringing the data of that Order
validateOrder = () => {
const { products, productsPackaging, anotherCai } = this.state;
const cai = document.getElementById('cai').value;
if (cai && cai !== '') {
this.setState({ validating: true });
Meteor.call('getcai', cai, (err, res) => {
this.setState({ validating: false });
if (!err) {
if (res.validated) {
toastr.success('...');
} else {
toastr.info('...');
}
const tempProducts = [];
const tempProductsPackaging = [];
let tempCounter = 0;
let tempAnotherCai = false;
console.log(res);
if (res.products && res.products.length > 0) {
if (productsPackaging.length > 0) {
tempAnotherCai = true;
}
for (let index = 0; index < res.products.length; index ) {
const element = { fakeId: `id-${index}`, articleId: res.products[index].Articulo_Id, originalAmountPills: res.products[index].amount };
const element2 = { ...res.products[index], fakeId: `id-${index}` };
tempProducts.push(element);
tempProductsPackaging.push(element2);
}
tempCounter = res.products.length - 1;
}
this.setState({
validated: res.validated,
productsPackaging: tempProductsPackaging,
products: tempProducts,
counterId: tempCounter,
anotherCai: tempAnotherCai,
});
} else {
toastr.info(err.error);
}
});
} else {
toastr.info('...');
}
}
表和按鈕
render() {
const {
products, validated, validating,
} = this.state;
return (
<div className="modal fade" id="modalNewPackaging" tabIndex="-1" role="dialog" aria-labelledby="modalNewPackaging" aria-hidden="true">
<div className="modal-dialog modal-dialog-centered" role="document" style={{ width: 1200, maxWidth: 'none' }}>
<div className="modal-content" style={{ overflow: 'auto' }}>
<div className="modal-header border-0">
<h5 className="modal-title text-center">Agregar de Forma Manual</h5>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-body">
//Order Input
<div className="row form-group">
<div className="col-6">
<input
required
id="cai"
type="text"
className="form-control text-primary"
style={{ borderColor: '#001689' }}
aria-describedby="inputGroup-sizing-sm"
aria-label="Small"
placeholder="CAI"
autoComplete="off"
/>
</div>
<div className="col-6">
{
validating ? (
<LoaderComponent />
) : (
//Button that Validates the Order
<button onClick={this.validateOrder} type="button" className="btn btn-success">Validate</button>
)
}
</div>
</div>
<form>
<div className="row form-group">
<div className="col-12">
<input
id="nameClient"
type="text"
maxLength="50"
className="form-control text-primary"
style={{ borderColor: '#001689' }}
aria-describedby="inputGroup-sizing-sm"
aria-label="Small"
placeholder="Nombre de Paciente"
autoComplete="off"
disabled={!validated}
/>
</div>
</div>
{
validating ? (
<LoaderComponent />
) : validated ? (
<div className="container">
<div className="container" style={{ maxHeight: '250px', overflowX: 'auto', overflowY: 'auto' }}>
<div className="card">
<div className="card-body">
<table className="table" style={{ width: '100%' }}>
<thead>
<tr>
<th>Product's Name</th>
...
</tr>
</thead>
<tbody>
{
products.map((product, index) => (
<tr key={product.fakeId}>
<td>
<input
required
defaultValue={this.defaultValue(product.fakeId, 'productName')}
id={`productName${product.fakeId}`}
name="productName"
type="text"
className="form-control"
style={{ borderColor: '#001689' }}
autoComplete="off"
list="suggestions"
/>
</td>
//...
))
}
</tbody>
</table>
</div>
</div>
</div>
</div>
);
}
}
默認值
defaultValue = (fakeId, inputName) => {
const { productsPackaging, anotherCai } = this.state;
const index = productsPackaging.findIndex(function findIt(item) {
return item.fakeId === fakeId;
});
if (index === -1) {
return '';
}
// console.log(fakeId);
// console.log(index);
// console.log('Iam in');
if (inputName.includes('productName')) {
console.log(productsPackaging[index].Articulo_Nombre);
//if (!anotherCai) {
return productsPackaging[index].Articulo_Nombre;
// } else {
// document.getElementById(`productName${fakeId}`).value = productsPackaging[index].Articulo_Nombre;
// }
}
}
uj5u.com熱心網友回復：
如果您想根據輸入的內容更改順序。您必須在輸入中的 onChange 事件中處理它。否則默認情況下將需要單擊按鈕。
uj5u.com熱心網友回復：
添加一個 useEffect 鉤子并將狀態作為依賴項傳遞到 useEffect 鉤子中，它將按預期作業。
useEffect(()=>{},[theChangingState])
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/345682.html
標籤：javascript 反应 MongoDB 流星
上一篇：使用時間戳和ID將行添加到SparkDataframe
下一篇：去中心化是什么意思?如何實作