Шаблон проектирования для реализации хуков в форме - PullRequest
Новая
       2

Шаблон проектирования для реализации хуков в форме

1 голос
/ 31 марта 2019

Исходя из фона класса, компоненты формы были спроектированы следующим образом - 

class Test extends Component {
    state = {
        name: '',
        //10 more variables
    }

    handleInputChange = (e) => {
        this.setState({
            [e.target.name]: value
        })
    }

    render() {
        return (
            <>
                <input type="text" name="name" onChange={this.handleInputChange} value={this.state.name} />
                {/* 10  more inputs */}
            </>
        )
    }
}

, где handleInputChange может быть повторно использовано во всех дальнейших дополнениях ввода, если переменная состояния имеет то же определение, что и имя элемента ввода.

Теперь, когда я сталкиваюсь с трудностью принятия решения, это то, что является лучшим подходом для этого варианта использования в схеме проектирования крючков. Итак, портирование этого поведения в хуки - 

function Test() {
  const [name, setName] = useState('');
  //10 more variables

  handleNameChange(e) {
        setName(e.target.value);
  }

  //similar 10 more functions

  return (
    <>
        <input name="name" onChange={handleNameChange} value={name} />
        {/* 10 more inputs */}
    </>
  );
}

Приведенный выше фрагмент кода в конечном итоге потребует определения 10 функций для установки значения каждой переменной в отдельности.

Объявление функции может быть уменьшено, но я чувствую, что код будет выглядеть нечитаемым, например - 

handleInputChange(e) {
   const functionName = e.target.name;
   functionName(e.target.value);
}

Чтобы углубиться в суть этой темы, какой подход будет наиболее подходящим для обработки нескольких похожих элементов (например, входных данных) в реагирующих хуках.

1 Ответ

2 голосов
/ 31 марта 2019

Если вы хотите повторить «мелкое объединение» поведения this.setState с крючками, вы можете использовать один useState с функцией обновления .Это можно выразить весьма кратко, используя синтаксис распространения объекта: 

const [state, setState] = useState({ name: '' });

function handleInputChange(e) {   
    setState(prevState => {
        return { ...prevState, [e.target.name]: e.target.value };
    });
}

Или, в качестве альтернативы, если вы не хотите использовать еще не стандартизированный синтаксис: 

const [state, setState] = useState({ name: '' });

function handleInputChange(e) {   
    setState(prevState => {
        return Object.assign({}, prevState, { [e.target.name]: e.target.value });
    });
}

ВыВозможно, вы захотите попробовать useReducer - я обнаружил, что он лучше справляется со сложными обновлениями состояния.

...