## 使用State收集表格資料，傳送表格到後端
在輸入的過程當中，直接把輸入值寫進state當中，後續在呼叫API的時候，state就有資料，不需要再透過javascript收集資料

import React, { Component } from 'react';
import axios from 'axios';

class Table extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "",
            email: "",
            address: "",
            phone: ""
        };
    }

    // 將input輸入欄位存到state當中，使用以下寫法可以簡化重複的程式碼，動態指定欄位名稱
    // 不需要每個欄位都寫一個changeHandler
    changeHandler = (event) => {
        this.setState({
            [event.target.name]: event.target.value
            // 如同 name: event.target.value，
            // 差別是欄位的名稱會依照觸發事件的元件改變
        });
    }

    // 如果不使用上述changeHandler的做法，需要針對每個欄位都寫各別的onChange事件
    changeNameHandler = (event) => {
        this.setState({
            name: event.target.value
            // email: event.target.value
            // address: event.target.value
            // phone: event.target.value
        });
    }

    // 送出按鈕
    // 直接使用state傳遞，無需將值從form當中取出，話說也沒有form就是了
    addTableAction = () => {
        axios.post("http://localhost:8080/addTable", this.state)
        .then(response => {
            console.log(response.data);
        });
    }

    render() {
        const { name, email, address, phone } = this.state;
        return (
            <>
                <table>
                    <tr>
                        <td>姓名：</td>
                        <td><input type="text" name="name" onChange={this.changeHandler} /></td>
                    </tr>
                    <tr>
                        <td>Email：</td>
                        <td><input type="text" name="email"onChange={this.changeHandler} /></td>
                    </tr>
                    <tr>
                        <td>地址：</td>
                        <td><input type="text" name="address" onChange={this.changeHandler}/></td>
                    </tr>
                    <tr>
                        <td>電話：</td>
                        <td><input type="text" name="phone" onChange={this.changeHandler} /></td>
                    </tr>

                    <tr>
                        <td colSpan="2"><input type="button" name="submit" value="送出" onClick={this.addTableAction}/></td>
                    </tr>

                </table>
                <hr/>
                <h3>表格即時輸入值</h3>
                <table>
                    <tr>
                        <td>姓名：</td>
                        <td>{name}</td>
                    </tr>
                    <tr>
                        <td>Email：</td>
                        <td>{email}</td>
                    </tr>
                    <tr>
                        <td>地址：</td>
                        <td>{address}</td>
                    </tr>
                    <tr>
                        <td>電話：</td>
                        <td>{phone}</td>
                    </tr>

                </table>
            </>

        );
    }
}

export default Table;

## 一個元件依不同的情境，做不同的運算
### 需要父子兩個元件來達成，透由父元件傳遞不同的運算邏輯給子元件，子元件就不需要撰寫運算，只需要負責呼叫父元件傳遞進來的function即可


### 父元件

class Parent extends Component {
    render() {
        return (
            <div>
                <Child title={'我是加法'} calFun={(x, y) => x + y }/>
                <hr/>
                <Child title={'我是乘法'} calFun={(x, y) => x * y }/>
            </div>
        );
    }
}

### 子元件

class Child extends Component {

    constructor(props) {
        super(props);
        this.state = {
            x: null,
            y: null,
            result: null
        }
    }

    // X的欄位有異動時，擷取輸入值更新State
    xChange = (event) => {
        this.setState({x: event.target.value});
    }

    // Y的欄位有異動時，擷取輸入值更新State
    yChange = (event) => {
        this.setState({y: event.target.value});
    }

    // 計算公式
    handleCalculate = () => {
        // const { x, y } = this.state; 這個用法叫做解構
        // 把state裡面的x跟y直接宣告成變數，之後就不用在this.state.x
        const { x, y } = this.state;

        const { calFun } = this.props;
    
        // 調用父元件傳遞的計算函數
        const result = calFun(Number(x), Number(y));
        this.setState({result: result});
      };

    render() {

        const { x, y, result } = this.state;
        const { title } = this.props;
        return (
            <div>
                <h2>{title}</h2>
                X: <input type="number" onChange={this.xChange}/><br/>
                Y: <input type="number" onChange={this.yChange}/><br/>
                <button onClick={this.handleCalculate}>計算</button>
                <h3>X: {x}</h3><h3>Y: {y}</h3><h3>結果: {result}</h3>
                
            </div>
        );
    }
}