Reactjs функция для изменения элементов состояния на основе двух входов

Question

У меня есть front-end в response-mui со списком из 8 слов, и каждое слово имеет свое состояние, обновленное на основе его ввода, и оно также может быть отключено. Пример:

        <TextField required id="standard-basic" disabled={this.state.word1Disabled} label="Word1" value={this.state.word1} onChange={(event) => this.setState({word1:event.target.value.trim()})} />
        <TextField required id="standard-basic" disabled={this.state.word2Disabled} label="Word2" value={this.state.word2} onChange={(event) => this.setState({word2:event.target.value.trim()})} />

Пользователь может решить, какое из 8 слов отключить, используя раскрывающееся меню, в котором реализована следующая функция:

    const handleWord = event => {

    switch(event.target.value) {
        case "1":
          this.setState({word1Disabled:true,word2Disabled:false,word3Disabled:false,word4Disabled:false,word5Disabled:false,word6Disabled:false,word7Disabled:false,
            word8Disabled:false})
          break;
        case "2":
            this.setState({word1Disabled:false,word2Disabled:true,word3Disabled:false,word4Disabled:false,word5Disabled:false,word6Disabled:false,word7Disabled:false,
                word8Disabled:false})
          break;
        case "3":
            this.setState({word1Disabled:false,word2Disabled:false,word3Disabled:true,word4Disabled:false,word5Disabled:false,word6Disabled:false,word7Disabled:false,
                word8Disabled:false})
          break;
        case "4":
            this.setState({word1Disabled:false,word2Disabled:false,word3Disabled:false,word4Disabled:true,word5Disabled:false,word6Disabled:false,word7Disabled:false,
                word8Disabled:false})
          break;
        case "5":
            this.setState({word1Disabled:false,word2Disabled:false,word3Disabled:false,word4Disabled:false,word5Disabled:true,word6Disabled:false,word7Disabled:false,
                word8Disabled:false})
          break;
        case "6":
            this.setState({word1Disabled:false,word2Disabled:false,word3Disabled:false,word4Disabled:false,word5Disabled:false,word6Disabled:true,word7Disabled:false,
                word8Disabled:false})
          break;
        case "7":
            this.setState({word1Disabled:false,word2Disabled:false,word3Disabled:false,word4Disabled:false,word5Disabled:false,word6Disabled:false,word7Disabled:true,
                word8Disabled:false})
          break;
        case "8":
            this.setState({word1Disabled:false,word2Disabled:false,word3Disabled:false,word4Disabled:false,word5Disabled:false,word6Disabled:false,word7Disabled:false,
                word8Disabled:true})
          break;

      }

     }

Хотя вышеуказанное решение решает мою проблему, я Предположим, что это не очень хорошая практика программирования, потому что это слишком повторяется. Может ли кто-нибудь подтвердить, что я на правильном пути?

Теперь я хочу дать пользователю возможность отключить два слова одновременно, используя выпадающее меню, скажем, слова 1 и 2. Как я могу изменить функция handleWord для достижения такого? Я пытался думать об этом, но, как мне кажется, он становится еще более повторяющимся, обрабатывая КАЖДЫЙ возможный случай для каждого из двух отключенных слов (8x8 = 64 случая, смеется).

Желаемый результат заключается в том, что пользователь сможет выбрать два слова, которые он хочет отключить, и эти текстовые поля получат свойство "disabled = {true}". Если пользователь передумает и захочет изменить слово, тогда старое отключенное текстовое поле снова станет активным.

Answer 1

Вы можете использовать следующую строку кода для своих случаев 8x8 = 64:)

this.setState({['word' + event.target.value + 'Disabled']: true});

Для отключения несколькими входами:

"1,3,5".split(',').map(value => {
            this.setState({['word' + value + 'Disabled']: true});
        });

Вот полный пример:

import React, {Component} from "react";
export class WordsDisable extends Component {
    state = {
            word1Disabled: false,
            word2Disabled: false,
            word3Disabled: false,
            word4Disabled: false,
            word5Disabled: false,
            word6Disabled: false,
            word7Disabled: false,
            word8Disabled: false
        };

    handleWord= (event) => {
        // Setting false for all words
        this.setState({
            word1Disabled: false,
            word2Disabled: false,
            word3Disabled: false,
            word4Disabled: false,
            word5Disabled: false,
            word6Disabled: false,
            word7Disabled: false,
            word8Disabled: false
        });

        this.setState({['word' + event.target.value + 'Disabled']: true});
    };
    render() {
        return (
            <div>
                <ul>
                    <input onChange={this.handleWord}/>
                </ul>
            </div>
        )
    }
}

Последнее, но не менее важное: вам не нужно обновлять все свойства с помощью setState. Вы просто обновляете свое единственное свойство, а остальные сохранят прежнее значение. Например:

switch (event.target.value) {
    case "1":
        this.setState({word1Disabled: true});
        break;
    case "2":
        this.setState({word2Disabled: true});
        break;
    case "3":
        this.setState({word3Disabled: true});
        break;
    case "4":
        this.setState({word4Disabled: true});
        break;
}