質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

127閲覧

Ccr のstateの値を、チェックボックスが女性の場合変化させたいです。

hiroyaiizuka

総合スコア14

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/05/17 22:13

前提・実現したいこと

React 初心者です。
抗菌薬の投与量を JASON が返してくれるアプリを作っております。

発生している問題・エラーメッセージ

チェックボックスが女性の場合、Ccr の値を、0.85 倍させたいのですが、
state を変化させることができません。

エラーとなってしまいます。

該当のソースコード

React

import React from "react";
import { render } from "react-dom";
import axios from "axios";
import GetJson from "./getjson";
import "./App.css";

class App extends React.Component {
constructor() {
super();
this.state = {
sex: "",
weight: "",
age: "",
cr: "",
result: ""
};
}

handleChange1 = e => {
const newValue = e.target.value;
const numValue = newValue.replace(/[^0-9]/g, "");
this.setState({ weight: numValue });
};

handleChange2 = e => {
const newValue = e.target.value;
const numValue = newValue.replace(/[^0-9]/g, "");
this.setState({ age: numValue });
};

handleChange3 = e => {
const newValue = e.target.value;
this.setState({ cr: newValue });
};

resultCcr = (e) => {
e.preventDefault();
const a = 140 - this.state.age;
const b = 72 * this.state.cr;
const c = this.state.weight / b;
const d = a * c;

this.setState({ result: d });

};

render() {
console.log(this.state.result);
return (
<div>
<form onSubmit={this.resultCcr}>
<h2> 抗菌薬 計算アプリ</h2>
<div>
<label>性別: </label>

<div> <select className="select"> <option value="男性">男性</option> <option value="女性">女性</option> </select> </div> </div> <div> <label> 体重: </label> <input className="weight" type="text" onChange={this.handleChange1} /> <label> kg </label> </div> <div> <label> 年令: </label> <input className="age" type="text" onChange={this.handleChange2} /> <label> 才 </label> </div> <div> <label> Cr: </label> <input className="cr" type="text" onChange={this.handleChange3} /> <label> mg/dL </label> </div> <button> CCr </button> <input className="ccr" type="text" value={Math.floor(this.state.result)} /> <label> ml/min </label> </form> <GetJson /> </div> );

}
}

render(<App />, document.getElementById("root"));

試したこと

if (this.state.sex =="女性"){
this.setState({result: result * 0.85 })
}

エラーとなってしまいます。
どなたか、ご教示頂ければ幸いでございます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

HayatoKamono

2018/05/17 23:03 編集

次の3点を質問文に反映させて下さい (1)エラーメッセージを追記 (2)どのタイミングでstateを変更させようとしているかを追記(チェックをつけた時なのか、ボタンを押した時なのかなど) (3)コードをコードブロックに修正
hiroyaiizuka

2018/05/17 22:42

今から仕事なので、今日の夕方までに、修正して質問させてください。どうぞよろしくお願いいたします。
HayatoKamono

2018/05/17 22:56 編集

了解です。追加修正依頼事項として、試したコードをどこで使ったのかがわかるように、掲載コードに反映させて下さい。
HayatoKamono

2018/05/17 22:55

あとは、どのタイミングでエラーが発生してるかも補足が必要ですね。次回から質問の際はこちらを参考に質問文を練ってから投稿すると、修正依頼を受けることもほぼなくなるかと思います。https://teratail.com/help/question-tips
HayatoKamono

2018/05/23 04:45

自己解決済であるならば、自己解決方法を詳細に回答欄に投稿し、自身の回答をベストアンサーにして自己解決として下さい。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問