如何在 React、JavaScript 中進行事件處理

Question

我有三個不同的選擇，我想將每個選定的和當前的選項存儲在自己的狀態。 我還希望用戶更改選項時將其存儲在狀態上。

這是我的狀態：

this.state = {
    header: [
        'genre',
        'sold',
        'income'
    ],
    chartData: [
        'Line',
        'Bar',
        'AreaChart',
        'PieChart',
        'ScatterChart'
    ],
    axisX: '',
    axisY: '',
    selectedLine: ''
}

這是我的“ handleChart ”函數。 基本上我在這里要做的是，當組件加載時，我想存儲狀態上的任何當前選項，當用戶更改或選擇新選項時，我也想將其存儲在狀態中。

handleChart = (e) => {
    e.preventDefault();
    const value = e.target.value;
    if(value === 'line'){
        // First selection: contains >>> different chart names
        this.setState({selectedLine: value})
    }else if(value === 'genre'){
        // Second selection: contains >>> different headers
        this.setState({axisX: value})
    }else if(value === 'income'){
        // Third selection: contains >>> different headers
        this.setState({axisY: value)
    }
}

我的 App.js

<div className="App">
    <div style={{display: 'inline-block'}}>
        <span>Chart type: </span>
        <select onChange={this.handleChart} style={{marginRight: '15px'}}>
            {this.state.chartData.map((k, v) => (
                <option name="line" key={k} value="line">{k}</option>
            ))}
        </select>
        <span>x-axis: </span>
        <select onChange={this.handleChart} style={{marginRight: '15px'}}>
            {this.state.header.map((k, v) => (
                <option name="xaxis" key={k} value={k}>{k}</option>
            ))}
        </select>
        <span>y-axis: </span>
        <select onChange={this.handleChart} style={{marginRight: '15px'}}>
            {this.state.header.map((k, v) => (
                <option name="yaxis" key={k} value={k}>{k}</option>
            ))}
        </select>
    </div>
</div>

Answer 1

看起來您已經有了一種基於更改輸入值來更新狀態的方法，但是您當前的方法可以改進為更加健壯。 你可以給每個輸入一個name屬性，然后讓 name 對應於state的變量名，這樣你就不需要一堆if/else if塊。

要讓輸入從狀態中獲取值，請將input / select /etc （而不是 on option ）上的value屬性設置為您要使用的state中的值。

這是handleChart的更新版本：

handleChart = event => {
    event.preventDefault();
    const { name, value } = event.target;

    this.setState({
        [name]: value;
    });
}

並更新了 App.js：

render() {
    const { axisX, axisY, selectedLine } = this.state;

    return (
        <div className="App">
            <div style={{display: 'inline-block'}}>
                <span>Chart type: </span>
                <select name="selectedLine" value={ selectedLine }  onChange={this.handleChart} style={{marginRight: '15px'}}>
                    {this.state.chartData.map((k, v) => (
                        <option name="line" key={k} value={v}>{v}</option>
                    ))}
                </select>
                <span>x-axis: </span>
                <select name="axisX" value={ axisX } onChange={this.handleChart} style={{marginRight: '15px'}}>
                    {this.state.header.map((k, v) => (
                        <option name="xaxis" key={k} value={v}>{v}</option>
                    ))}
                </select>
                <span>y-axis: </span>
                <select name="axisY" value={ axisY } onChange={this.handleChart} style={{marginRight: '15px'}}>
                    {this.state.header.map((k, v) => (
                        <option name="yaxis" key={k} value={v}>{v}</option>
                    ))}
                </select>
            </div>
        </div>
    )
}