ユーザーから提供された数値に基づいて計算を行い、結果をページに入力するボタンがあります。その同じボタンはまた、データベースからそれらの同じ製品をページに視覚的に入力しながら、製品をデータベースに保存します。つまり、基本的には、ユーザーがフィールドに入力したものの合計と以前の合計が表示されます。私の問題は、エラー処理を含めて、すべてのフォームに入力しなかったために数値が0またはNaNの場合、アラートをスローし、データをデータベースにプッシュしないようにすることです。これは私の試みであり、機能しません。結果がNaNの場合でも表示され、NaN値がデータベースにプッシュされます。これを実現するにはどうすればよいですか?試行は次のとおりです。
handleClick = (event, billInfo) => {
event.preventDefault();
const dbRef = firebase.database().ref();
const result =
(billInfo.amount / billInfo.group) * (billInfo.tip / 100 + 1);
// ATTEMPT START ======
result === NaN
? alert("Please fill all forms!")
: dbRef.push({
result: result.toFixed(2),
name: billInfo.name,
});
// ATTEMPT END ======
this.setState({
total: result.toFixed(2),
});
これは、メインのapp.jsにリンクするボタンを備えたフォームコンポーネントです。
class inputForm extends Component {
constructor() {
super();
this.state = {
name: "",
group: "",
amount: "",
tip: "",
};
}
handleChange = (event) => {
this.setState({
[event.target.name]: event.target.value,
});
};
clearForm = (event) => {
event.preventDefault();
this.setState({
name: "",
group: "",
amount: "",
tip: "",
});
};
render() {
return (
<form className="tipApp">
<div>
<label htmlFor="groupName">
<i class="fas fa-id-card"></i>Group Name?
</label>
<input
onChange={this.handleChange}
type="text"
id="groupName"
value={this.state.name}
placeholder="Name your group"
name="name"
/>
</div>
<div>
<label htmlFor="groupSize">
<i class="fas fa-users"></i>How many?
</label>
<input
onChange={this.handleChange}
type="number"
id="groupSize"
value={this.state.group}
min="1"
step="1"
placeholder="Add the group size"
name="group"
required
/>
</div>
<div>
<label htmlFor="billAmount">
<i class="fas fa-receipt"></i>How much?
</label>
<input
onChange={this.handleChange}
type="number"
id="billAmount"
value={this.state.amount}
min="0"
step=".01"
placeholder="Add the bill total"
name="amount"
required
/>
</div>
<div>
<label htmlFor="tipAmount">
<i class="fas fa-heart"></i>Tip?
</label>
<input
onChange={this.handleChange}
type="number"
id="tipAmount"
value={this.state.tip}
min="10"
step="5"
placeholder="Add the tip %"
name="tip"
/>
</div>
<button onClick={(event) => this.props.getTotal(event, this.state)}>
Split it!
</button>
<button onClick={this.clearForm}>Reset</button>
</form>
);
}
}
これは、エラー処理を試みた完全なapp.jsメインファイルです。
class App extends Component {
constructor() {
super();
this.state = {
bills: [],
total: 0,
};
}
componentDidMount() {
const dbRef = firebase.database().ref();
// Event listener that watches the database
dbRef.on("value", (snapshot) => {
const firebaseData = snapshot.val();
const billData = [];
for (const bill in firebaseData) {
billData.push({
id: bill,
name: firebaseData[bill].name,
value: firebaseData[bill].result,
});
}
this.setState({
bills: billData,
});
});
}
handleClick = (event, billInfo) => {
event.preventDefault();
const dbRef = firebase.database().ref();
const result =
(billInfo.amount / billInfo.group) * (billInfo.tip / 100 + 1);
result === NaN
? alert("Please fill all forms!")
: dbRef.push({
result: result.toFixed(2),
name: billInfo.name,
});
this.setState({
total: result.toFixed(2),
});
};
deleteBill = (billId) => {
const dbRef = firebase.database().ref();
dbRef.child(billId).remove();
};
render() {
return (
<div className="wrapper">
<h1 className="logoName">Spl|tr</h1>
<h3>Bill Splitting App</h3>
<Form getTotal={this.handleClick} />
<h2>${this.state.total}</h2>
<h3>Previous Bills</h3>
<Bills receipts={this.state.bills} delete={this.deleteBill} />
</div>
);
}
}
これは、ボタンクリック時にフォームの下にある前のアイテムをページに入力したBills.jsコンポーネントです。
const Bills = (props) => {
return (
<ul>
{props.receipts.map((bill) => {
return (
<li key={bill.id}>
<p>{bill.name}</p>
<p>${bill.value}</p>
<button onClick={() => props.delete(bill.id)}>
<i class="fas fa-times-circle"></i>
</button>
</li>
);
})}
</ul>
);
};
ハンドラーは、有効な結果であるかどうかに関係なく、状態を更新します。小さなリファクタリングは、有効な結果とプッシュDBへと更新状態のいずれかできるはずOR無効な結果やアラートを。0
とNaN
は両方とも偽の値であるため、result
が真/偽であるかどうかを簡単に確認できます。
handleClick = (event, billInfo) => {
event.preventDefault();
const dbRef = firebase.database().ref();
const result =
(billInfo.amount / billInfo.group) * (billInfo.tip / 100 + 1);
if (result) {
dbRef.push({
result: result.toFixed(2),
name: billInfo.name,
});
this.setState({
total: result.toFixed(2),
});
} else {
alert("Please fill all forms!")
}
};
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加