Как сделать обработку событий в 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)
    }
}

My 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, а затем присвоить имя, соответствующее имени переменной, в пределах state, поэтому вам не нужно связывать блоки if/else if.

Чтобы входы принимали значения изустановите атрибут value для input / select / etc (а не для option) равным значению из 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>
    )
}