ReactJS part 3.7

13386 ワード
メモ はじめに js React テキストリンク

Flip

<html lang="ko">

<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    const root = document.querySelector("#root");
    function App() {
        const [amount, setAmount] = React.useState("");
        const [flipped, setFlipped] = React.useState(false);
        const onChange = (event) => {
            setAmount(event.target.value);
        };
        const reset = () => setAmount(0)
        const onFlip = () => {
            reset();
            setFlipped((current) => !current);
        };
        return (
            <div>
                <h1>converter</h1>
                <div>
                <label htmlfor="minutes">Minutes</label>
                    <input 
                    value={flipped ? amount * 60 : amount} 
                    id="minutes" 
                    placeholder="Minutes" 
                    type="number"
                    onChange={onChange}
                    disabled={flipped}
                />
                </div>
                <div>
                <label htmlfor="hours">Hours</label>
                
                <input
                    value={flipped ? amount : Math.round(amount / 60)}
                    id="hours"
                    placeholder="Hours"
                    type="number"
                    disabled={!flipped}
                />
                </div>
                <button onClick={reset}>Reset</button>
                <button onClick={onFlip}>Flip</button>
            </div>
        );
    }
    ReactDOM.render(<App />, root);
</script>
</html>
flip
const onFlip = () => setFlipped(!flipped);
->flippedがtrueなら、それは否定命題です!falseに反転
->falseの場合はtrue
state値を使用して、入力を有効または無効にするかどうかを決定できます.
デフォルトはfalseなので、Hoursを無効にする必要があります
無効={flipped==false}と書いてあります
flippedがfalseの場合、無効化はtrueに設定されます.
Minuetsとは逆
無効={flipped==true}
しかし
Hours
disabled={!flipped}
Minuetsとは逆
disabled={flipped}
もっと短くあげたほうがいいです.
時間->分変換器
3つの演算子(ternary演算子)の使用
flipped ? amount : amount/60
->反転状態の場合は、状態の値が表示されます
そうでない場合は、60に変換された値が表示されます.
value={flipped ? amount * 60 : amount}
->反転状態の場合、表示変換値に60を乗算
そうでない場合は、ステータスの値が表示されます.
flipを押すと変更した値が得られます.
onFlip変数()にリセットします.挿入
[react]redox開発者ツールの設定
WebSphere環境変数をアプリケーションで読み込む